Question

我正在使用jquery-ui datepicker。问题是，默认情况下，库会在输入字段后直接插入日历图标。但我的HTML标记有点不同，我希望日历图标出现在DOM的其他位置，即输入字段的父容器之外。

我甚至尝试手动添加自己的<img/>并添加了类ui-datepicker-trigger，但它不会触发任何内容。

如何决定图标在DOM中的显示位置并且必须有效？

这就是我想要的：

<div class="parent">
    <input id="datepicker" class="hasDatepicker" type="text" />
</div>

<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="..." />

不是这个（默认jquery-ui插入）：

<input id="datepicker" class="hasDatepicker" type="text" />
<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="..." />

非常感谢

Answer 1

尝试手动添加触发器，该触发器将在图像上显示datepicker：

$("#datepickerImage").click(function() {
    $("#datepicker").datepicker( "show" );; 
});

Answer 2

试试这个

$(selector).datepicker({showOn: 'button', buttonImage: 'img/cal.gif',
      buttonImageOnly: true, buttonText: 'Open calendar'});

SEE HERE

Jquery datepicker日历图标定位

2 个答案: