3

我正在使用JQuery UI datepicker，但不是将 datepicker 附加到input[type=text]元素，而是将它附加到input[type=hidden]元素。为了激活 datepicker，我在 UI 上使用了一个远程按钮，它不是 datepicker 所附加的输入元素的兄弟。

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

$('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]为 aninput[type=text]以允许日期选择器显示输入元素何时聚焦，则所有单击事件都会毫无问题地触发（直到我通过按钮激活日期选择器，然后无论日期选择器以哪种方式激活，它们都会失败）。

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

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

4

2 回答 2

3

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

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

JS

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

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

小提琴

于 2013-07-10T14:49:21.073 回答
1

在 JSFiddle ( http://jsfiddle.net/XJ7Z7/1/ ) 中稍微解决了这个问题之后，很明显，如果您将 datepicker 附加到输入元素 - 输入元素必须是可见的（即，不一个隐藏的元素）。

这样做的原因是因为 Datepicker 模块试图通过定位日历position:absolute;并且准确地这样做需要获取它所附加到的输入元素的顶部/左侧偏移量。隐藏的输入元素没有顶部/左侧偏移（它设置为 0/0），因此模块会跳过该元素以尝试找到可用于计算日历放置位置的可见元素。

如果没有可以使用的兄弟元素，则引用对象被设置为 null 并且当 datepicker 尝试访问返回对象的 left/top 属性时抛出异常，$(el).offset()因为对 offset 的调用返回 null 值。

@adeneo 在接受的答案中概述了这里的解决方案，但牺牲是您必须通过 datepickeronSelect模块初始化的回调自行管理所选日期的隐藏输入值。

我希望这可以帮助遇到类似问题的人。

于 2013-07-10T15:22:48.897 回答