Question

自从我的Datepicker添加OnSelect后，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上。

非常感谢有关这方面的任何帮助。干杯！

Answer 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实例是change字段，则jQuery UI Datepicker会默认触发input事件，但如果您指定了自定义onSelect处理程序，则不会触发它（正如你所做的那样）。

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

但我同意这种行为可能应该记录下来。

Answer 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

Answer 3

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

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

JQuery Datepicker OnSelect和TextChanged问题

3 个答案: