Issue with JQuery Date Picker in Modal Window

Question

I created a modal form/window using with the code:

    $(function () {
        var widthLen = window.screen.width - 10;
        var heightLen = window.screen.height - 120;
        $("#dialogOperation").dialog({
            width: widthLen,
            height: heightLen,
            closeOnEscape: true,
            modal: true,
            close: function () {
                window.location.href = "OperationMenu.aspx" 
            } 
        });
    });

with a textbox that has date picker attached to it and buttons in it. Everything works fine except for a little issue - the date picker calendar is always displaying everytime there is a postback. After every control event the calendar is appears.

What I want to happen is to show the calendar only when I click the textbox which is commonly happening in the forms that are not modal dialog.

When I tried hiding the datepicker using:

    $(document).ready(function () {
        $('#txtDate').datepicker('hide');
    });

I was only unable to show the calendar anymore even though I call it on a text focus:

    $("#txtDate").focus(function () {
        $('#txtDate').datepicker();
    }).blur(function() {
        $('#txtDate').datepicker('hide');
    });

I have also tried putting z-index: 1003 inside the jquery css but I am still not having much luck.

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 1003; }

Anyone who can help me resolve this issue would be greatly appreciated.

Thanks in advance!!

Regards, Harland

Answer 1

Either you can use the option showOn http://docs.jquery.com/UI/Datepicker#option-showOn

Or disable datepicker first and use the open event of dialog to enable it.Disable when dialog is closed.

open: function(){
    $('#txtDate').datepicker('enable');

},
close: function() {
    $('#txtDate').datepicker('disable');
}

demo: http://jsfiddle.net/diode/Xawe2/

Answer 2

what about 'show' in the last but one line?

$("#txtDate").focus(function () {
    $('#txtDate').datepicker();
}).blur(function() {
    $('#txtDate').datepicker('show');
});