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

Question

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

Answer 1

主要障碍是正确设置结束截止日期（至少对我而言）。我发现所有datepickers应该都适用的方法是在初始化的时候直接在date declaration中加减date，因为这是JS操作，bootstrap datepickers是基于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.

希望这对您有所帮助。干杯！

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

Disabling future dates in bootstrap datepicker without using startDate and endDate

javascript

jquery

datepicker

razor

bootstrap-datepicker