jquery datepicker automatically opens (but shouldn't)

Question

I have an app that is using JQuery UI. This app needs to open a dialog and show two date pickers. Currently, I have the dialog working. I also have two date pickers. My problem is: a) the date pickers default date is not showing and b) when I open the dialog, the "from" date picker is automatically opened. Here is my code that initializes the dialog and the date pickers:

<div id="myDialog" title="Other Date Range" style="display:none;">
    <table border="0">
        <tr>
            <td>From</td>
            <td></td>
            <td>To</td>
        </tr>
        <tr>
            <td><input id="fromOtherDateTextBox" style="width:140px;" /></td>
            <td>&nbsp;-&nbsp;</td>
            <td><input id="toOtherDateTextBox" style="width:140px;" /></td>
        </tr>
        <tr>
            <td>mm/dd/yyyy</td>
            <td></td>
            <td>mm/dd/yyyy</td>
        </tr>
    </table>
</div>

$(document).ready(function () {
    $("#fromOtherDateTextBox").datepicker({        
        defaultDate: "-1d",
        maxDate: 0,
        minDate: new Date(2000, 1, 1)
    });   

    $("#toOtherDateTextBox").datepicker({        
        defaultDate: "0d",
        maxDate: 0,
        minDate: new Date(2000, 1, 1)
    });   

    $("#myDialog").dialog({
        autoOpen: false, modal: true,
        show: "fade", hide: "fade",
        height:220, width:350,
        buttons: {
            'Cancel': function () { $(this).dialog('close'); },
            'View': useOtherDate_Click
        }
    });    
});

Here is the code I use to open the dialog:

$("#myDialog").dialog("open");

What am I doing wrong?

Thank you!

Answer 1

The problem is when the dialog is opened focus is set to the date control, which causes the datepicker to open up.

One possible solution is to assign a tabIndex=1 an element other than the data controls.

<div id="myDialog" title="Other Date Range" style="display:none;">
    <table border="0" tabIndex="1">

Demo: Fiddle

The defaultDate property will not set the default date for the input control, it will just highlight the date in the popup. If you look at the datepicker popup, you can find that the set defaultDate is highlighted

Answer 2

Try to call close() method after initializing the datepicker component.

$("#fromOtherDateTextBox").datepicker({ /* ... */}).close();