Jquery – Datepicker change event fires multiple times on manual entry

datepickerjqueryjquery-ui

I have a datepicker, that has onSelect property that will execute a "change" function on the datepicker input field. The "Change" event runs a function to fill a select list. This works so long as I choose the datepicker, but if I manually enter in a date in the input field, the change event will execute twice and the select list will have duplicated values.

    $("#txtStartDate").datepicker({
    defaultDate: +1,
    dateFormat: "mm/dd/yy", //yy format represents a (4) digit year
    minDate: new Date($("#ctl00_ContentPlaceHolder2_hidfldJunDate").val()),
    maxDate: new Date($("#ctl00_ContentPlaceHolder2_hidfldMayDate").val()),
    showOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    beforeShowDay: $.datepicker.noWeekends,
    firstDay: 1,
    showButtonPanel: true,
    showOn: "button",
    onSelect: function () { $(this).change(); },
    buttonImage: "../Scripts/JQuery/ui/calendar.gif",
    buttonImageOnly: true
}).mask("99/99/9999");

$("#txtStartDate").change(function () {
    if (($("#txtStartDate").val() != "") && ($("#txtStartDate").val() != "__/__/____")) {
        var DoDate = CheckDate($("#txtStartDate").val());
        if (DoDate != "Good") {
            alert("Please enter a valid Start Date");
            $("#txtStartDate").val("");
            $("#txtStartDate").focus();
        }
        else {
            SemesterList($("#txtStartDate").val(), 0);
        }
    }
});

So what do I need to do to prevent the multiple firings of this change event so I don't get duplicates in the select list. I have even tried selectlist.remove thinking this would remove all elements in the list, but it still multiplies.

Any help is appreciated.

Best Solution

Use this syntax to remove the original binding by the Datepicker:

$("#txtStartDate").unbind('change').change(function () {
          // your code 
});
Related Question