14

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>
2

9 Answers 9

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

6
  • @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, 2012 at 12:26
  • you said "datapicker is loaded on has focus" and I want exactly the opposite .
    – user1204905
    Mar 17, 2012 at 12:30
  • @user1204905 updated my answer - you could use a different trigger from focus .. such as a button
    – Manse
    Mar 17, 2012 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, 2012 at 12:34
  • can you give me a final answer or final link(which is not modified every second)
    – user1204905
    Mar 17, 2012 at 12:42
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...

2
  • Excellet, since I want the DatePicker to work as normal (don't like extra buttons). Nov 17, 2016 at 5: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, 2020 at 17:40
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>
6
  • i just entered that p tag and just hided . Everything worked fine thanks .
    – user1204905
    Mar 17, 2012 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, 2012 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 ?
    – user1204905
    Mar 17, 2012 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, 2012 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
    – user1204905
    Mar 17, 2012 at 13:12
2

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">
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');
3
  • 1
    honestly, the only solution that worked flawlessly for me across all browsers (other solutions don't work in Safari). thanks!
    – dmytroy
    Sep 24, 2018 at 10:32
  • This did not work for me. Maybe it depends on the jQuery version? I'm using 1.9
    – Vincent
    Jan 13, 2020 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, 2020 at 0:43
1

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)

0
0

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();
        });
    });
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 />

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.