jQuery Datepicker选择2020年12月开始日期后结束日期全部禁用问题

该问题由JavaScript Date对象的月份计数规则不匹配导致：

• JS Date构造函数的月份参数是从0开始计数的，0对应1月，11对应12月
• 你从输入框拆分得到的月份值是常规1-12的计数，直接传入Date构造函数时，12月会被自动进位到下一年的1月。比如选中December 2020的日期时，生成的Date对象实际是2021年1月的日期
• 结束日期选择器配置了maxDate: 0（最大可选日期为当天），当结束日期的最小可选日期被设为2021年的日期时，minDate大于maxDate，所有日期自然全部被禁用。

1. 初始化开始日期对应的Date对象时，将月份参数减1，匹配JS的月份计数规则
2. 直接传入处理好的Date对象作为minDate，无需手动拼接日期字符串，避免格式错误
3. 每次选择开始日期后，调用setOptions方法更新结束日期选择器的配置即可，无需重复实例化组件。

JavaScript代码 #

if (jQuery('#datetimepicker1').length > 0) {
    jQuery('#datetimepicker1').datetimepicker({
        lang: 'ch',
        timepicker: false,
        format: 'd/m/Y',
        formatDate: 'Y/m/d',
        maxDate: 0,
        onChangeDateTime: function(dp, $input) {
            var from = $input.val().split("/");
            // 月份参数减1匹配JS计数规则
            var f = new Date(from[2], from[1] - 1, from[0]);
            // 直接调用setOptions更新配置，无需重新实例化
            $("#datetimepicker2").datetimepicker('setOptions', {
                minDate: f,
                startDate: f,
                changeMonth: f.getMonth(),
                changeYear: f.getFullYear()
            });
        }
    });
}

if (jQuery('#datetimepicker2').length > 0) {
    jQuery('#datetimepicker2').datetimepicker({
        lang: 'ch',
        timepicker: false,
        format: 'd/m/Y',
        formatDate: 'Y/m/d',
        maxDate: 0,
    });
}

HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

<input id="datetimepicker1" type="text" placeholder="Start Date"/>
<input id="datetimepicker2" type="text" placeholder="End Date"/>

内容的提问来源于stack exchange，提问作者Jignesh Panchal