Datepicker change event fires multiple times on manual entry

Question

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.

remove $(this).change() from onSelect method, but keep this method (even though its empty now), this hack worked in my test — MinhajulAnwar, Oct 12 '15 at 14:20

score 2 · Answer 1 · answered Mar 30 '12 at 12:12

2

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

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

answered Mar 30 '12 at 12:12

Shehabic

6,787
9
52
93

I added the .unbind('change') to the above code but it still runs through the Semesterlist function (2) times giving me a duplicatated lines of choices in by select control. – Tom S Mar 30 '12 at 20:07
1

Remove this part: onSelect: function () { $(this).change(); }, – Shehabic Mar 30 '12 at 20:49

Datepicker change event fires multiple times on manual entry

1 Answers1