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

Question

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

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

这是一个工作示例：jsFiddle

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

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

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

score 0 · Accepted Answer

根据文档，您需要将图像包装在隐藏的 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/

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

1 回答 1