.datepicker（）函数可单击第二下

Question

I have a list of datepickers generated on runtime, each with an id, but all under the same class "datepicker"

<input class="datepicker" data-id="Adult" id="datepicker-0" Name="DateOfBirth0">
<input class="datepicker" data-id="Child" id="datepicker-1" Name="DateOfBirth1">
<input class="datepicker" data-id="Child" id="datepicker-2" Name="DateOfBirth2">

In javascript, I want to make adult's age between 13 and 90, and children's age between 2 and 12. So I am doing this:

 $(function () {
        $(".datepicker").click(function () {
            var aId = this.id.split('-');
            var refNum = aId[1];
            var dataId = $("#datepicker-" + refNum).attr('data-id');

            var minDate = "";
            var maxDate = "";
            if (dataId == 'Adult') {
                minDate = "-90Y";
                maxDate = "-13Y";
            }
            else if (dataId == 'Child') {
                minDate = "-12Y";
                maxDate = "-2Y";
            }

            $("#datepicker-" + refNum).datepicker({
                changeMonth: true,
                changeYear: true,
                maxDate: maxDate,
                minDate: minDate
            });
        });
    });

So the weird thing that is happening, is that when the page loads, first time I click on the ".datepicker" input, nothing happens. Second time I click on the input, the datepicker calendar appears.

Any idea why?

Answer 1

It is working on second click because it is not taking the focus. Check following fiddler created.

https://jsfiddle.net/0xr4jeba/

Hope this will help!!!

$("#datepicker-" + refNum).datepicker({
                              changeMonth: true,
                              changeYear: true,
                              maxDate: maxDate,
                              minDate: minDate
                          }).focus();   

Answer 2

Try adding the

$(document).ready(function() {

    $(".datepicker").click(function () {
                var aId = this.id.split('-');
                var refNum = aId[1];
                var dataId = $("#datepicker-" + refNum).attr('data-id');

                var minDate = "";
                var maxDate = "";
                if (dataId == 'Adult') {
                    minDate = "-90Y";
                    maxDate = "-13Y";
                }
                else if (dataId == 'Child') {
                    minDate = "-12Y";
                    maxDate = "-2Y";
                }

                $("#datepicker-" + refNum).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    maxDate: maxDate,
                    minDate: minDate
                });
            });

    });

This ensures that the document is loaded and event listners wire up before clicking