Date Picker automatically opens

Question

I have a javascript code using which I want to accomplish the following . I want when i click on the button a form to appear but datepicker's date choosing option not to appear automatically (but in my case it opens up) . So in other words I wand disable that autoopen . Here is the script

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"     type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"     type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"     type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#button").click(function () {
                var dates2 = $("#datePicker3,#datePicker4").datepicker({
                    autoOpen: false,
                    minDate: 0,
                    changeMonth: true,
                    numberOfMonths: 1,
                    onSelect: function (selectedDate) {
                        var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                            instance = $(this).data("datepicker"),
                            date = $.datepicker.parseDate(
                            instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                        dates2.not(this).datepicker("option", option, date);
                        calculate_total_price();
                    }

                }); ///
                $("#order-popup").dialog();
                $("#order-popup").show();
            });
        });
    </script>
    <input type="button" value="addclass" id="button">
    <div id="order-popup" style="display:none;" class="popup-content already-ordered">
        <input type="text" id="datePicker3" name="datepickerFrom" value="">
        <br/>
        <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
        </form>
    </div>
</body>

Any use? http://stackoverflow.com/questions/932420/jquery-ui-datepicker-opens-automatically-within-dialog — Jason Evans, Mar 17 '12 at 12:19
i'd redesign the calendar and make the field readonly and only submit data if you click on the button to open the calendar — cristi _b, Mar 17 '12 at 12:24

Manse · Accepted Answer · 2012-03-17T12:32:58.040

18

The reason the datepicker shows immediately is because the input the datapicker is loaded on has focus by default .. see here - this is because its the first input on a form .... if you add another input before the first its fine - > http://jsfiddle.net/JXtBM/1/

One way around this problem would be to use a button to trigger the opening of the datepicker :

showOn: "button",
buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,

Working example here

edited Mar 17 '12 at 12:32

answered Mar 17 '12 at 12:20

Manse

37,765
10
83
108

@user1204905 why would you want to ? you are going to me a user click in the input - which will open up the datepicker ! – Manse Mar 17 '12 at 12:26
you said "datapicker is loaded on has focus" and I want exactly the opposite . – Mar 17 '12 at 12:30
@user1204905 updated my answer - you could use a different trigger from focus .. such as a button – Manse Mar 17 '12 at 12:33
@user1204905 the second link has an extra `input` in the dialog - the first `input` in the dialog gets focus by default so inserting an `input` before the datepicker one means its doesnt launch by default – Manse Mar 17 '12 at 12:34
can you give me a final answer or final link(which is not modified every second) – Mar 17 '12 at 12:42
@user1204905 - Check out my answer. It references the source of the issue and gives a possible solution. Unless you want to either change the framework code or blur the element just after showing it, you'll have to have something above the datepicker input that gets focus. – Anthony Mar 17 '12 at 12:53

score 6 · Answer 2 · edited Sep 14 '17 at 13:37

6

If you don't want the focus on the datepicker, you can just put another input before them and make it "invisible"

<input type="button" value="addclass" id="button">
<div id="order-popup" style="display:none;" class="popup-content already-ordered">
    <input style="height:0px; top:-1000px; position:absolute" type="text" value="">
    <input type="text" id="datePicker3" name="datepickerFrom" value="">
    <br/>
    <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
    </form>
</div>

In this case the input has height 0px, and is out of the screen, so it won't show up. Keep in mind that dates should be always picked, allowing the user to write is a risk because of date formats, separators, etc...

edited Sep 14 '17 at 13:37

Nilesh Thakkar

2,877
1
24
43

answered Mar 17 '12 at 12:52

Miguel Ribeiro

8,057
20
51
74

Excellet, since I want the DatePicker to work as normal (don't like extra buttons). – Andulf Games - Anders Bjerin Nov 17 '16 at 05:25
Sad that we have to hack like this for such a simple issue, but this is the only solution that worked for me. – Vincent Jan 13 '20 at 17:40

score 3 · Answer 3 · edited May 23 '17 at 11:54

3

As ManseUK said, it's because the dialog method automatically selects the first "tabbable" element within the parent element. It is hard coded to do this, as shown in another question.

One workaround (that I think looks weird, but works), would be to set a tab index to another element above the inputs, like so:

<div id="order-popup" style="display:none;" class="popup-content already-ordered">
    <p tabindex="1">Choose Dates:</p>
    <input type="text" id="datePicker3" name="datepickerFrom" value="" />
    <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px" />
</div>

edited May 23 '17 at 11:54

Community

1
1

answered Mar 17 '12 at 12:47

Anthony

36,459
25
97
163

i just entered that p tag and just hided . Everything worked fine thanks . – Mar 17 '12 at 12:54
Be careful how you hide it. In my test, setting it to display:none causes it to be skipped over and thus the input is in focus again. – Anthony Mar 17 '12 at 12:57
To be honest i didnt undesrtand what you meant but hiding blank p tag worked fine . Is there any problem that you thing might come up in this situation ? – Mar 17 '12 at 13:05
1

If your p tag is empty, the only issue is that Google Chrome puts a halo around tabbable elements in focus, so that will look funny. To avoid that, add this to the p element: `style="outline:none;"` – Anthony Mar 17 '12 at 13:08
Thanks Anthony . I forgot to say that I didnt hide anything . And also didnt find any difference in chrome after styling it the way you wanted – Mar 17 '12 at 13:12
It works, but it looks really ugly. Not a good solution for me. – Vincent Jan 13 '20 at 17:07

score 2 · Answer 4 · answered Jan 04 '13 at 09:40

set a tab index to another element help to reslove the issue as like below:

**<label tabindex="1">From Date:</label>**
<input type="text" name="from_date" id="from_date" readonly="readonly"  class="hasDatepicker">

<label>To Date</label>
<input type="text" name="to_date" id="to_date"  readonly="readonly" class="hasDatepicker">

Robin · Answer 5 · 2018-09-26T12:24:25.583

2

Triggering 'blur' after creation solves the problem for me. I see this as a workarround, but it does the job.

I dont want to add a button to open the calender nor adding extra inputs to my document.

$('[data-datepicker="datepicker"]').datepicker().trigger('blur');

edited Sep 26 '18 at 12:24

answered Apr 08 '15 at 10:33

Robin

318
2
11

1

honestly, the only solution that worked flawlessly for me across all browsers (other solutions don't work in Safari). thanks! – metamaker Sep 24 '18 at 10:32
This did not work for me. Maybe it depends on the jQuery version? I'm using 1.9 – Vincent Jan 13 '20 at 17:08
Are you sure the code is called at the right time? I am not sure if this line still works with updated versions. You could test this by calling the line directly from the browser concole. – Robin Jan 15 '20 at 00:43

score 1 · Answer 6 · answered Mar 17 '12 at 12:19

Try putting the datepicker initialization in the document ready callback, like this:

$(document).ready(function(){

var dates2 = $( "#datePicker3,#datePicker4" ).datepicker({
                            autoOpen:false,
                            minDate:0,
                            changeMonth: true,
                            numberOfMonths: 1,
                            onSelect: function( selectedDate ) {
                                var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                                instance = $( this ).data( "datepicker" ),
                                date = $.datepicker.parseDate(
                                    instance.settings.dateFormat ||
                                    $.datepicker._defaults.dateFormat,
                                    selectedDate, instance.settings );
                                dates2.not( this ).datepicker( "option", option, date );
                                calculate_total_price();
                            }

 });
});

and the click function only contains:

$("#order-popup").dialog();
$("#order-popup").show();

I'm not 100% sure this will work but at least is the correct way to do the initialization (if you already have it on the page, initialize on ready)

score 0 · Answer 7 · answered Jan 17 '13 at 19:45

You could solve this problem just by removing the focus after the $("#order-popup").show();

    $(document).ready(function () {
        $("#button").click(function () {
            var dates2 = $("#datePicker3,#datePicker4").datepicker({
                autoOpen: false,
                minDate: 0,
                changeMonth: true,
                numberOfMonths: 1,
                onSelect: function (selectedDate) {
                    var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                        instance = $(this).data("datepicker"),
                        date = $.datepicker.parseDate(
                        instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                    dates2.not(this).datepicker("option", option, date);
                    calculate_total_price();
                }

            }); ///
            $("#order-popup").dialog();
            $("#order-popup").show();
            $('#datePicker3, #datePicker4').blur();
        });
    });

Kevbo · Answer 8 · 2018-01-09T18:57:53.887

0

Best option is to set the "autofocus" attribute on another element. When jquery opens the dialog it will look for the element with the autofocus attribute and set the focus to it. If none is found then focus is set to the first visible element.<input type="text" id="txtDescription" autofocus />

edited Jan 09 '18 at 18:57

answered Jan 09 '18 at 18:52

Kevbo

947
9
12

score 0 · Answer 9 · answered Apr 11 '18 at 14:38

0

I solved this, by adding this as a first field in my form.

answered Apr 11 '18 at 14:38

Rami Muurimäki

170
7

Date Picker automatically opens

9 Answers9

Linked