JQuery Datepicker OnSelect and TextChanged problem

Question

Since adding an OnSelect to my Datepicker, the TextChanged event no longer fires for this control. My code is as follows:

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

My other datepicker (txtEndDate) TextChanged event does fire so can only put it down to the OnSelect being defined for the txtStartDate control.

Greatly appreciate any help on this one. Cheers!

Answer 1

After a short check of the jQuery UI Datepicker sources the solution is to just fire the change event yourself

...
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');
}
...

The reason for this are the following lines in the jQuery UI Datepicker source

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');

As you can see jQuery UI Datepicker fire the change event per default if the datepicker instance is an input field but doesn't fire it if you specified a custom onSelect handler (as you did).

You could argue that actually this is the correct behavior as it guarantees you maximal configurability. You can decide if you want the change event to happen or not this way.

But I agree that this behavior maybe should be documented.

Answer 2

You may just add

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

to the end of onSelect function. Consider the working following example: http://jsbin.com/oqunu/ or edit version http://jsbin.com/oqunu/edit

Or move or the logic to functions triggered by TextChanged and get rid of onSelect. Like here: http://jsbin.com/iyajo; edit version http://jsbin.com/iyajo/edit

Answer 3

In a similar vein, I found that if you attach the DatePicker to a text input field, and specify .selectMultiple, then weird behavior occurs. Specifically, when you click on an already selected cell (in order to unselect it), it flickers but stays selected. This occurs because first the cell does go unselected, but then DatePicker throws a 'change' event. The change event turns the current cell back on because the calendar is attached to a text input!

This makes sense, in a way: you probably shouldn't stick multiple selections into a single text box. But the behavior is undocumented and rather hard to trace unless you already know how DatePicker understands text boxes.