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

我使用的是，但不是将日期选择器附加到

input[type=text]

元素，而是将其附加到

input[type=hidden]

元素。为了激活datepicker，我在UI上使用了一个远程按钮，它不是datepicker所连接的输入元素的同级

为了显示datepicker，我使用了一个执行此代码的click事件处理程序

$('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]

以允许日期选择器在输入元素聚焦时显示，所有单击事件都会毫无问题地触发（直到我通过按钮激活日期选择器，那么无论日期选择器以何种方式激活，它们都会失败）

是否有更可靠的方法通过远程按钮激活日期选择器并隐藏日期的输入元素？我不知道为什么会抛出这个异常

---

这里有一个例子，说明了这一点，但在一个特定的环境中不起作用。不过，例外情况并不相同。经过进一步的研究，我似乎已经找到了原因，我将在下面的答案中添加这一点。

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

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

---

在JSFiddle（）中对这个问题进行了一些处理之后，很明显，如果将日期选择器附加到输入元素，那么输入元素必须是可见的（即，不是隐藏的元素）

这是因为Datepicker模块试图通过

position:absolute定位日历

要准确地执行此操作，需要获取其所附着的输入元素的上/左偏移量。隐藏的输入元素没有上/左偏移量（设置为0/0），因此模块跳过该元素，尝试查找一个可见的元素，以计算日历的放置位置

如果没有可以使用的同级元素，则引用对象将设置为null，并且当日期选择器尝试访问返回对象的左/顶属性

$（el）.offset（）

，因为对offset的调用返回null值时引发异常

@adeneo在接受的答案中概述了这里的解决方案，但牺牲的是，您必须通过datepicker模块初始化的

onSelect

回调自行管理所选日期的隐藏输入值

---

我希望这能帮助那些遇到类似问题的人。

你能在一个文件夹中复制这个问题吗？为存档目的添加了一个问题的JSFiddle链接。我不知道我可以在这样的div中使用它，我认为这当然更好。不过，我想我使用输入元素的原因是，datepicker会自动更新输入中所选日期的值，而无需我自己管理。实际上，您仍然可以通过文本框和一些CSS来隐藏它。

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

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