JQuery Datepicker OnSelect 和 TextChanged 问题答案

【问题标题】：JQuery Datepicker OnSelect and TextChanged problemJQuery Datepicker OnSelect 和 TextChanged 问题
【发布时间】：2010-12-25 13:31:35
【问题描述】：

自从将 OnSelect 添加到我的 Datepicker 后，不再为此控件触发 TextChanged 事件。我的代码如下：

$(function() {
    $("#<%=txtStartDate.ClientID %>").datepicker({
        minDate: 0,
        dateFormat: 'dd-M-yy',
        onSelect: function(dateText, inst) {
            var theDate = new Date(Date.parse($(this).datepicker('getDate')));
            $("#<%=txtEndDate.ClientID %>").datepicker('option', 'minDate', theDate);
        }
    });

    $("#<%=txtEndDate.ClientID %>").datepicker({
        dateFormat: 'dd-M-yy'
    });
});

<%-- etc ---- %>

<asp:TextBox ID="txtStartDate" runat="server" AutoPostBack="true" OnTextChanged="txtStartDate_TextChanged"></asp:TextBox>

我的其他日期选择器 (txtEndDate) TextChanged 事件确实触发了，因此只能将其归结为为 txtStartDate 控件定义的 OnSelect。

非常感谢对此提供的任何帮助。干杯！

【问题讨论】：

标签： jquery datepicker onselect

【解决方案1】：

在对 jQuery UI Datepicker 源进行简短检查后，解决方案是自己触发更改事件

...
onSelect: function(dateText, inst) {
    var theDate = new Date(Date.parse($(this).datepicker('getDate')));
    $("#<%=txtEndDate.ClientID %>").datepicker('option', 'minDate', theDate);
    if (inst.input)
        inst.input.trigger('change');
}
...

原因是 jQuery UI Datepicker 源代码中的以下几行

if (onSelect)
    // trigger custom callback
    onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);
else if (inst.input)
    // fire the change event
    inst.input.trigger('change');

如您所见，如果 datepicker 实例是 input 字段，则默认情况下 jQuery UI Datepicker 会触发 change 事件，但如果您指定了自定义 onSelect 处理程序（如您所做的那样），则不会触发它。

您可能会争辩说，这实际上是正确的行为，因为它保证了最大的可配置性。您可以决定是否希望change 事件以这种方式发生。

但我同意这种行为可能应该记录在案。

【讨论】：

【解决方案2】：

你可以添加

$('<%=txtStartDate.ClientID %>').trigger('change');

到onSelect 函数的末尾。考虑以下工作示例： http://jsbin.com/oqunu/ 或编辑版本http://jsbin.com/oqunu/edit

或者将逻辑移到TextChanged触发的函数中，去掉onSelect。像这儿： http://jsbin.com/iyajo;编辑版本http://jsbin.com/iyajo/edit

【讨论】：

【解决方案3】：

以类似的方式，我发现如果将 DatePicker 附加到文本输入字段并指定 .selectMultiple，则会出现奇怪的行为。具体来说，当您单击已选择的单元格（以取消选择它）时，它会闪烁但保持选中状态。发生这种情况是因为首先该单元格确实未被选中，但随后 DatePicker 引发了“更改”事件。更改事件会重新打开当前单元格，因为日历已附加到文本输入！

这在某种程度上是有道理的：您可能不应该将多个选择粘贴到单个文本框中。但这种行为没有记录，而且很难追踪，除非您已经知道 DatePicker 如何理解文本框。

【讨论】：