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

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