Avoid reopen datepicker after select a date

Question

Only in IE with this code

$('#datepicker').datepicker({
    onSelect : function(x, u){
     $(this).focus();   
    }
});

when I select a date, the datepicker reopen itself because I added $(this).focus(); in onSelect. How I can to resolve this issue? (Example)

I'm using jquery 1.8.2 and jquery-ui 1.9

Answer 1

I came across this issue today and had a different solution work for me. My scenario was that my DatePicker was inside a jQuery UI Dialog popup. Everything worked fine in Chrome, but in IE, the calendar would always reappear after selecting a date.

As it turns out, there is an open bug for this in jQuery 1.10.1: http://bugs.jqueryui.com/ticket/9125

There is also a JSFiddle linked to that demonstrates the bug in IE. There are two ways to get this to work in IE:

1. Set modal to false
2. Focus on another element right after date selection

I went with #2, and here is an example of the fix (just updating the JSFiddle code):

Markup:

<div id="dialog">
    <input id="datepicker" />
    <input type='button' value='save' id='btnSave'/>    
</div>

JS:

$( "#datepicker" ).datepicker({onSelect: function() { $('#btnSave').focus(); }});
$( "#dialog" ).dialog({ modal: true });

Hopefully this helps someone in the future!