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