javascript - 通过远程按钮激活 JQuery UI 日期选择器

Question

我正在使用 JQuery UI datepicker ，但我没有将日期选择器附加到 input[type=text] 元素，而是将它附加到 input[type=hidden] 元素。为了激活日期选择器，我在 UI 上使用了一个远程按钮，它不是日期选择器附加到的输入元素的同级元素。

为了显示日期选择器，我使用了执行此代码的点击事件处理程序

$('input.trial_end_date').datepicker('show');

这可以显示日期选择器，但每当我点击一个日期时，我都会收到一个未捕获的 javascript 异常:

Uncaught Missing instance data for this datepicker jquery-ui-1.10.1.custom.min.js:6
e.extend._getInst jquery-ui-1.10.1.custom.min.js:6
e.extend._selectDay jquery-ui-1.10.1.custom.min.js:6
t.selectDay jquery-ui-1.10.1.custom.min.js:6
v.event.dispatch localhost.local/:5
o.handle.u localhost.local/:5

但是，如果我将 input[type=hidden] 更改为 input[type=text] 以允许日期选择器在输入元素获得焦点时显示，所有点击事件都会毫无问题地触发(直到我通过按钮激活日期选择器，然后无论以何种方式激活日期选择器，它们都会失败)。

是否有更可靠的方法来通过远程按钮激活日期选择器并隐藏日期的输入元素？我完全不确定为什么会抛出此异常。

这是一个在 JSFiddle 中不起作用的例子.但是，异常(exception)情况并不相同。经过进一步研究，我似乎找到了原因，我将在下面的答案中添加。

Answer 1

当您可以在常规 div 上实例化日期选择器并仅隐藏和显示该 div 时，为什么要使用隐藏输入？如果您不需要输入，请不要使用它。

<input type="button" id="open" />
<div id="datepicker"></div>

JS

$('#datepicker').datepicker();

$('#open').on('click', function() {
    $('#datepicker').toggle();
});

FIDDLE