12

I currently have a dialog box with two inputs as its content (with the two inputs using .datepicker()). When I open dialog box, the first input becomes the focus and the first datepicker automatically appears. I have tried hiding the div and blurring the input, but that causes the datepicker to no longer appear on focus.

Ideally, I want to be able to the following:

  • Open the dialog box (with no datepickers showing).
  • Click in the first input and have the datepicker show.

Here is my current code:

JAVASCRIPT:

$("#to").datepicker({
      onClose: function (selectedDate) {
         $("#from").datepicker("option", "minDate", selectedDate);
      }
    });

    $("#from").datepicker({
     onClose: function (selectedDate) {                            
         $("#to").datepicker("option", "maxDate", selectedDate);
    }
});


$("#settingsDialog").dialog({
     autoOpen: false,
    open: function (event, ui) {
                     if ($(".ui-datepicker").is(":visible"))
                         $(".ui-datepicker").hide();

                     $("#to").blur();
                     $this.focus().click();
                 },
     close: function () {
         $(this).dialog("close");
     }
});

I have also made a jsfiddle demo: http://jsfiddle.net/ARnee/19/

I have searched online for a solution, and found similar questions, but none that seem to help. Could anyone assist me?!

EDIT:

The browser I am using is Chrome.

Improve this question

4 Answers 4

Reset to default
15

Try setting the tabindex attribute on the inputs containing the datepicker to -1.

<input type="text" id="to" tabindex="-1" />

EDIT:

<input id="to" type="text" tabindex="-1" />
<input id="from" type="text" tabindex="-1" />

DEMO: http://jsfiddle.net/ARnee/32/

Improve this answer
2
  • 2
    +1 - for this to work, you would need to apply this to both inputs. regardless, very nice find!
    – Dom
    Commented Jun 21, 2013 at 18:42
  • That's the solution for me as well. Should be the accepted answer.
    – Zim84
    Commented Jan 1, 2019 at 10:01
7

Can stick a dummy input in dialog that has no height so won't be seen. Place it before the datepicker fields

<input style="height:0px; border:none"/>

DEMO: http://jsfiddle.net/ARnee/20/

Improve this answer
3
  • Thank you for your help! This was an ingenious way of approaching this!
    – Dom
    Commented Jan 7, 2013 at 16:12
  • Thanks. I Also set 'background: transparent ', because form has different Colour.
    – Dawood Awan
    Commented Apr 15, 2015 at 20:48
  • This solution works, but leaves an ugly selected-frame around the invisible input that irritates. It disappears once you click somewhere else.
    – Zim84
    Commented Jan 1, 2019 at 10:02
1

You can create the datepickers upon open of the dialog, like so:

$("#settingsDialog").dialog({
    autoOpen: false,
    open: function (event, ui) {
                     //if ($(".ui-datepicker").is(":visible"))
                     //    $(".ui-datepicker").hide();

                     $("#to").blur();
                 },
     close: function () {
         $("#to").datepicker("destroy");
         $("#from").datepicker("destroy");
         $(this).dialog("close");
     }
});



$("#b1").click(function(){
      $("#settingsDialog").dialog("open");
      $("#to").datepicker({
         onClose: function (selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
         }
      });

      $("#from").datepicker({
         onClose: function (selectedDate) { 
            $("#to").datepicker("option", "maxDate", selectedDate);
         }
      });
});

​

Improve this answer
1
  • should also use destroy on close in case dialog is used again
    – charlietfl
    Commented Jan 4, 2013 at 23:34
0 
$(document).ready(function(){



$("#settingsDialog").dialog({
     autoOpen: false,
    open: function (event, ui) {
        $("#to").datepicker({
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
        }
    });

    $("#from").datepicker({
        onClose: function (selectedDate) {                            $("#to").datepicker("option", "maxDate", selectedDate);
    }
});
                     if ($(".ui-datepicker").is(":visible"))
                         $(".ui-datepicker").hide();

                     $("#to").blur();
                     $this.focus().click();
                 },
     close: function () {
         $("#to").datepicker( "destroy" );
         $("#from").datepicker( "destroy" );
         $(this).dialog("close");
     }
});



    $("#b1").click(function(){
       $("#settingsDialog").dialog("open");
    });

});
​
Improve this answer
2
  • Unfortunately, this works only on the initial dialog open. If you close it and open it again, the problem still persists.
    – Dom
    Commented Jan 4, 2013 at 23:53
  • you're right as mccannf said use destroy for datepicker on close will solve it
    – Madi
    Commented Jan 5, 2013 at 0:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.