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?

possible duplicate of How to blur the first form input at the dialog opening — Teepeemm
– Teepeemm, Commented Sep 16, 2015 at 13:31

Community · Accepted Answer · 2017-05-23 12:17:25Z

7

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

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Oct 7, 2011 at 17:30

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nick Olsen Over a year ago

Don't know if that is a jsfiddle issue but if you put it in a normally rendered page it happens in Chrome as well.

jk. Over a year ago

@NickOlsen It's the dialog putting focus on the first element. There is a ticket into the jquery ui team to fix. In the meantime, I updated my answer and fiddle.

Nick Olsen Over a year ago

That's somewhat annoying. But, I guess you can't complain to much when it is free! :)

jk. Over a year ago

@NickOlsen True, but it looks like the ui team is working on it for version 1.9.

Khaneliman Over a year ago

Just adding that you'd want to an the close function to disable it again, if you expect them to open and use the dialog again.

William Niu · Accepted Answer · 2011-10-07 22:33:23Z

6

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/.

answered Oct 7, 2011 at 22:33

William Niu

15.9k8 gold badges58 silver badges93 bronze badges

1 Comment

Ashok KS Over a year ago

I see it, but when calling from in a separate file, it doen't work. We need to only include jquery1.6.3 ?

Geoff · Accepted Answer · 2011-10-07 17:18:19Z

0

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.

answered Oct 7, 2011 at 17:18

Geoff

9,3508 gold badges40 silver badges48 bronze badges

1 Comment

Nick Olsen Over a year ago

I tried both of these ideas as mentioned in the description and it didn't work. I put a breakpoint on the open function and the datepicker window is not open at that point. It opens after the open function executes.

Hasib Ullah Khan · Accepted Answer · 2014-01-16 12:00:52Z

0

Try This one line code

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

answered Jan 16, 2014 at 12:00

Hasib Ullah Khan

1

Comments

Daniel Weber · Accepted Answer · 2014-12-10 15:23:46Z

0

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>

answered Dec 10, 2014 at 15:23

Daniel Weber

113 bronze badges

Collectives™ on Stack Overflow

jQuery UI DatePicker Open on Dialog Window Open

5 Answers 5

5 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related