javascript - 在不使用 startDate 和 endDate 的情况下禁用引导日期选择器中的未来日期

Question

我想要一个日期选择器，它不仅可以禁用过去的日期，还可以禁用未来的日期。Stack Overflow 上关于类似问题的所有答案都指向使用startDateand endDate。但是，如果您使用的 datepicker 版本没有这些选项怎么办？例如，bootstrap-datepicker.js。

标签： javascriptjqueryrazordatepickerbootstrap-datepicker

Answer 1

主要障碍是正确设置结束截止日期（至少对我而言）。我发现应该适用于所有日期选择器的方法是在初始化时直接在日期声明中添加或减去日期，因为这是一个JS操作，并且引导日期选择器是基于JS的：

new Date(checkin.date.getFullYear(), checkin.date.getMonth(), checkin.date.getDate() + 6, 0, 0, 0, 0);

请注意我+ 6在日期旁边的下一个，因为我希望结束日期在所选开始日期后一周，并在此之后禁用所有内容。

因此，在所选开始日期之前和一周之后禁用所有内容的完整代码是：

    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
    var checkin = $('.date-group').datepicker({
        onRender: function (date) {

        }
    }).on('changeDate', function (ev) {
        //if (ev.date.valueOf() > checkout.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 0); // automatic date offset for end date (currently 0)
        checkout.setValue(newDate);
        //}
        checkin.hide();
        checkout.show();
        $('.end-date-group')[0].focus();
    }).data('datepicker');


    var checkout = $('.end-date-group').datepicker({
        onRender: function (date) {

            var cap = new Date(checkin.date.getFullYear(), checkin.date.getMonth(), checkin.date.getDate() + 6, 0, 0, 0, 0);

            if (date.valueOf() < checkin.date.valueOf()) {
                return 'disabled';
            }
            else if (date.valueOf() > cap.valueOf()) {
                return 'disabled';
            }
        }
    }).on('changeDate', function (ev) {
        checkout.hide();
    }).data('datepicker');

结果日期选择器：

如果需要，您也可以对月份和年份执行相同的操作。

作为参考，我使用的特定日期选择器是bootstrap-datepicker.js。

希望这有帮助。干杯!