Calling JQuery datepicker hide() from custom button, calendar reopens in IE

Question

I have a JQuery dialog that has two textboxes associated with Jquery date pickers, which are used to accept a date range.

I have added a custom button to the Jquery datepicker, called "Save". Problem is, when I click the button, the function associated with it executes, but the calendar remains open. I have to click on an area outside the datepicker to make the calendar close. How do I fix this? This is seen only with IE. Works fine with FF.

var startDateTextBox = $('#StartDate');
var endDateTextBox = $('#EndDate');

This is my custom function:

    function addSaveButton(textBoxObject)
    {
        //These variables can be ignored. Used to set limits for the other datepicker
        var idTextBox = textBoxObject.attr('id');
        var otherTextBoxObject = idTextBox == "StartDate" ? endDateTextBox : startDateTextBox;
        var optionName = idTextBox == "StartDate" ? "minDate" : "maxDate";

        setTimeout(function ()
        {
            var buttonPane = textBoxObject
                                .datepicker("widget")
                                .find(".ui-datepicker-buttonpane");

            $("<button>", {
                text: "Save",
                click: function ()
                {
                    //Get the date
                    var dateToBeSet = getDateToSet(idTextBox);

                    //Set the date
                    textBoxObject.datepicker('setDate', dateToBeSet);

                    //Set the limits for the other date picker
                    otherTextBoxObject.datepicker("option", optionName, dateToBeSet);

                    //Hide this datepicker
                    textBoxObject.datepicker("hide");

                    //Remove focus
                    textBoxObject.blur();
                }
            }).appendTo(buttonPane).addClass(".ui-datepicker-buttonpane ui-state-default ui-priority-primary ui-corner-all");
        }, 1);
    }

This is my datepicker code For one of the textboxes:

startDateTextBox.datepicker({
        autoSize: true,
        closeText: "OK",
        showButtonPanel: true,
        constrainInput: true,
        showWeek: true,
        maxDate: "+0",
        dateFormat: 'd MM yy',
        changeMonth: true,
        changeYear: true,

        beforeShow: function (input, inst)
        {
            addSaveButton(startDateTextBox);
        },

        onChangeMonthYear: function (year, month, inst)
        {
            addSaveButton(startDateTextBox);
        },

        onSelect: function (dateText, inst)
        {
            //Set the limits for the other date picker
            instance = startDateTextBox.data("datepicker");
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
                                    dateText,
                                    instance.settings);

            endDateTextBox.datepicker("option", "minDate", date);
        },

        onClose: function (dateText, inst)
        {
            //Remove focus
            startDateTextBox.blur();
        }
    });

Answer 1

I updated the function addSaveButton(textBoxObject) and added code to briefly disable the input textbox associated wth the datapicker and it worked.

function addSaveButton(textBoxObject)
    {
       ...

        setTimeout(function ()
        {
            var buttonPane = textBoxObject
                                .datepicker("widget")
                                .find(".ui-datepicker-buttonpane");

            $("<button>", {
                text: "Save",
                click: function ()
                {
                    .
                    .
                    .

                    //Remove focus
                    textBoxObject.blur();

                    //Disable textbox
                    textBoxObject.attr("disabled", "disabled");

                    setTimeout(function ()
                    {
                        // Removed the 'disabled' attribute after 1 millisecond
                        textBoxObject.removeAttr("disabled");  
                    }, 1);

                }
            }).appendTo(buttonPane).addClass(".ui-datepicker-buttonpane ui-state-default ui-priority-primary ui-corner-all");
        }, 1);
    }