jQuery: Date picker starts opened in dialog, only in IE

Question

I have found an interesting bug when using a jQuery dialog where the first field in the dialog is a date picker. When the dialog is opened in IE the date picker for the first field automatically opens. This does not happen in other browsers. Does anyone know how to prevent this from happening in IE?

I have tried putting a .blur() in the document.ready section but that didn't work. Has anyone else seen this problem?

I am using MVC3 and IE8

Answer 1

There is actually a problem with @ManseUK's solution; when the dialog is opened, and the user clicks on the textbox of the datepicker, it does not open the first time. This solution should work for all expected cases.

I'm not sure who the author is, but I found the solution on CleanCode.co.nz

HTML

<input type="button" value="Show Popup" id="button"/>
<div id="popup">
    <div>
        Date: <input type="text" id="datePicker3" >
    </div>
    <div>
        Name: <input type="text" id="UserName">
    </div>
</div>​

jQuery

$(document).ready(function() {
    $("#popup").dialog({
        autoOpen: false,
        resizable: false,
        height: 300,
        width: 400,
        modal: true,
        open: function() {
            $('#datePicker3').removeAttr("disabled");
        },
        close: function () {
            $('#datePicker3').datepicker('hide');
        }
    });

    $("#datePicker3").datepicker();

    $("#button").click(function() {
        $('#datePicker3').attr("disabled", true);

        $("#popup").dialog("open");
    });
});​

Working JSFiddle

*You need to enable jQuery UI, and click Run