修改 datepick 插件以在单击图标时弹出日历

【问题标题】：modify datepick plugin to popup calendar when an icon is clicked修改 datepick 插件以在单击图标时弹出日历
【发布时间】：2013-08-25 14:08:20
【问题描述】：

我在我的网站上使用了一个名为 datepick 的 jQuery calander 插件。我将日期选择器连接到我的输入字段，如下所示：

 $('.dobOnly').datepick();

这是一个工作示例：jsFiddle

默认情况下，当用户点击输入时日历会弹出。相反，我希望它仅在用户单击输入旁边的图标时才会弹出。

值得一提的是，我正在处理的页面上有几个这样的输入。因此，解决方案似乎必须包括修改 datepick() 以将相关文本字段的 id 作为参数，以便弹出窗口影响预期的输入。

编辑我必须完成此任务的最佳方法是什么？

【问题讨论】：

【解决方案1】：

根据文档，您需要将图像包装在隐藏的 div 中。然后在datepick 的选项中指定showOnFocus 和showTrigger 属性。

HTML

<input type="text" name="gd2" id="gd2"/>
<div style="display:none">
    <img id="calImg" src='https://pnrbuilder.com/_images/cal.png' alt=""/>
</div>

 $(function() {
    $('#gd2').datepick({showOnFocus: false, showTrigger: '#calImg'});
 });

JSFIDDLE： http://jsfiddle.net/xzzCf/7/

在documentation 的invocation 选项卡上有一个示例

【讨论】：