Jquery datepicker automatically opens (but should not)

I have an application using jQuery UI. This application should open a dialog and show two date selections. I currently have a dialogue running. I also have two date selections. My problem is this: a) the date of the date of the date selection is not displayed, and b) when I open the dialog, "from" date picker is automatically selected. Here is my code that initializes the dialog and date picker:

<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 that I use to open a dialog:

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

What am I doing wrong?

Thank!

+5
source share
2 answers

The problem is that when you open the dialog, the focus is on the date control, which causes the date to open.

tabIndex=1 , .

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

: Fiddle

defaultDate , . datepicker, , defaultDate

+8

close() datepicker.

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

All Articles