时间戳

首页 > 解决方案 > eonasdan bootstrap datetimepicker minDate 过去的一些日期除外

jquery - eonasdan bootstrap datetimepicker minDate 过去的一些日期除外

问题描述

我想禁用除某些（至少一个）之外的过去日期，这是因为我的表单不允许选择过去的日期，但是当我重新加载包含现有数据的表单时，我需要在日期选择器中显示该日期，但是因为我禁用过去的日期，如果正在加载的数据是过去的日期，它只是默认为今天的日期。

$("#datepicker").datetimepicker({
 format: "YYYY-MM-DD, ddd",
 showClear: true,
 disabledDates: ["2020-06-03"],
 enabledDates: ["2020-06-04"],
 minDate: new Date(),
});

我一直在尝试 3 个选项disabledDates、enabledDates和minDate，如果我添加一个minDate它只会禁用过去的日期并忽略我的enabledDates. enabledDates没有 似乎无法正常工作disabledDates，我收到一条错误消息，提示“未捕获尝试 31 次以找到有效日期”，我是否可以选择仅用于disabledDates禁用过去的日期？创建由过去日期组成的数组的最佳解决方案是什么，以便我可以将其放入disabledDates？

标签： jqueryeonasdan-datetimepicker

解决方案

我遇到了这个确切的场景；问题是en/disabled 日期优先于彼此和 min/maxDate。

如果您的合格日期范围不那么开放，您可以全力以赴enabledDates，就像在这个答案中一样。

我的项目包含 datetimepicker 作为 js 文件，所以我最终添加了一个新选项alwaysEnabledDate.

第一次发帖，所以这是我最好的解释我是如何做到的，完全在bootstrap-datetimepicker.js：

  1. 根据isValid定义，targetMoment.isValid()检查之后和之前检查disabledDates,enabledDates等：
if (options.alwaysEnabledDate && targetMoment.isSame(moment(options.alwaysEnabledDate), granularity)) {
    return true;
}
  1. 在行首之后$.fn.datetimepicker.defaults = {，添加：alwaysEnabledDate: false,，例如：
$.fn.datetimepicker.defaults = {
    alwaysEnabledDate: false,
    // ... existing code
}
  1. 在标题为“公共 API 函数”的区域下（您可以在其中看到picker.toggle、picker.show、picker.ignoreReadOnly等的定义）：
picker.alwaysEnabledDate = function (alwaysEnabledDate) {
    if (arguments.length === 0) {
        return options.alwaysEnabledDate ? options.alwaysEnabledDate.clone() : options.alwaysEnabledDate;
    }

    if ((typeof alwaysEnabledDate === 'boolean') && alwaysEnabledDate === false) {
        options.alwaysEnabledDate = false;
        update();
        return picker;
    }

    if (typeof alwaysEnabledDate === 'string') {
        if (alwaysEnabledDate === 'now' || alwaysEnabledDate === 'moment') {
            alwaysEnabledDate = getMoment();
        }
    }

    var parsedDate = parseInputDate(alwaysEnabledDate);

    if (!parsedDate.isValid()) {
        throw new TypeError('alwaysEnabledDate() Could not parse date parameter: ' + alwaysEnabledDate);
    }

    options.alwaysEnabledDate = parsedDate;
    update();
    return picker;
};

鉴于上述更改，您的用法将是：

$("#datepicker").datetimepicker({
 format: "YYYY-MM-DD, ddd",
 showClear: true,
 alwaysEnabledDate: '2020-06-04',
 minDate: new Date()
});

在此屏幕截图中，我已使用 6/12 的 minDate 和alwaysEnabledDate6/3 的 minDate 进行了初始化。

（警告词：我只用day粒度测试了这种方法）

推荐阅读