单击图标时，将datepick插件修改为弹出日历

Question

我在我的网站上使用名为datepick的jQuery calander插件。我将datepicker连接到我的输入字段，如下所示：

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

以下是一个有效的例子：jsFiddle

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

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

编辑什么是最好的方法我必须完成这个？

Answer 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>

<强> JS

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

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

documentation

的invocation标签上有一个示例