Question

我有一个在运行时生成的日期选择器列表，每个都有一个id，但都在同一个类“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">

在javascript中，我想让成年人的年龄在13到90岁之间，孩子的年龄在2到12岁之间。所以我这样做：

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

所以发生的奇怪事情是，当页面加载时，我第一次点击“.datepicker”输入时，没有任何反应。第二次单击输入时，会出现datepicker日历。

知道为什么吗？

Answer 1

正在进行第二次点击，因为它没有成为焦点。检查以下fiddler创建。

https://jsfiddle.net/0xr4jeba/

希望这会有所帮助!!!

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

Answer 2

尝试添加

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

    });

这样可以确保在单击

之前加载文档并连接事件列表

.datepicker（）函数在第二次单击时起作用

2 个答案: