jQuery UI DatePicker Open on Dialog Window Open

Question

I am displaying a jQuery UI dialog window that contains a jQuery UI datepicker control in it. The problem is that the first form field on the dialog window is the datepicker and thus it receives focus when the window opens up which in turn causes the datepicker window to automatically open. I don't want this to occur.

I have tried calling

$('#Date').datepicker('hide')

in then open function of the dialog window and also after the code that makes the dialog open but it doesn't work as when that code is reached, the datepicker window isn't open yet.

How can I make it so that the datepicker window doesn't open when the dialog window shows up but still have it open when the user clicks on the input?

Answer 1

You could use the icon trigger: http://jqueryui.com/demos/datepicker/#icon-trigger

And, if needed, prevent the user from typing in a date.

I created a fiddle of a dialog with a datepicker and couldn't duplicate the issue in FF or Chrome. Got it to happen in IE.

http://jsfiddle.net/458bM/2/

$(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd '
});

$(".datepicker").datepicker("disable");

$("#dialog").dialog({
width: 400,
modal: true,
open: function(event, ui) {
    $(".datepicker").datepicker("enable");
    }
});

Based on previous answer: How to blur the first form input at the dialog opening

Answer 2

You can disable the datepicker when the dialog is not open.

$('#datepicker').datepicker({ 
    ...
    disabled: true 
});

$('#dialog').dialog({
    open: function(event, ui) {
        $('#datepicker').datepicker('enable');
    },
    close: function(event, ui) {
        $('#datepicker').datepicker('disable');
    },
    ...
});

See this in action: http://jsfiddle.net/william/Rf37h/1/.

Answer 3

When you define your dialog you can specify the element to receive focus on open. Set the focus to a different element in the dialog

$('#myDialog').dialog({
    open: function (event, ui)
        {
            $('#myInputBox').focus();
        }
});

You could also put your call to hide the datepicker in the open event code.

Answer 4

Try This one line code

$(document).ready (function () { 
 $('#dialog_modal_body').on("click", ".datepicker", function(){
       $("#ui-datepicker-div").css("z-index", "100000");
 });
});

Answer 5

Add a hidden element before it that it will try to autofocus to.

This will keep your datepicker from being focused on when opening the dialog.

<span class="ui-helper-hidden-accessible"><input type="text"/>Prevents autofocus from opening start datepicker on dialog load</span>