【问题标题】:Disabling future dates in bootstrap datepicker without using startDate and endDate在不使用 startDate 和 endDate 的情况下禁用引导日期选择器中的未来日期
【发布时间】:2021-11-21 10:39:17
【问题描述】:

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

【问题讨论】:

    标签: javascript jquery razor datepicker bootstrap-datepicker


    【解决方案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.

    希望这会有所帮助。干杯!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-09-28
      • 2016-07-03
      相关资源
      最近更新 更多