在日期之前禁用 Zebra Date Picker jQuery Plugin 中的所有日期答案

【问题标题】：Disable all Dates in Zebra Date Picker jQuery Plugin prior to a Date在日期之前禁用 Zebra Date Picker jQuery Plugin 中的所有日期
【发布时间】：2023-03-13 23:20:01
【问题描述】：

我正在使用一个名为 Zebra DatePicker:

的 jQuery 日期选择器插件

Zebra DatePicker：http://stefangabos.ro/jquery/zebra-datepicker/
GitHub：https://github.com/stefangabos/Zebra_Datepicker/

我在项目管理应用程序上使用它，该应用程序在模态 DIV 中打开项目任务记录并设置此 DatePicker 以选择任务到期日期。

插件可以选择禁止选择日期。设置日期可以是disabled 和enabled 的文档如下所示......

我的目标是禁用所有早于Task creation Date 的日期，这样Due Date 就不能设置为任务记录创建日期之前的日期！

此代码是您如何在输入字段上设置日期选择器并传入选项...

$('#datepicker').Zebra_DatePicker({
    disabled_dates: 'ARRAY of DISABLED DATES',
    enabled_dates: 'ARRAY of ENABLED DATES',
});

以下是有关禁用日期的文档...

disabled_dates

mixed   
An array of disabled dates in the following format: ‘day month year weekday’ where “weekday” is optional and can be 0-6 (Saturday to Sunday); The syntax is similar to cron’s syntax: the values are separated by spaces and may contain * (asterisk) – (dash) and , (comma) delimiters:

['1 1 2012'] 将禁用 2012 年 1 月 1 日；

['* 1 2012'] 将禁用 2012 年 1 月的所有日期；

['1-10 1 2012'] 将禁用 2012 年 1 月 1 日至 10 日；

['1,10 1 2012'] 将禁用 2012 年的 1 月 1 日和 10 日；

['1-10,20,22,24 1-3 *'] 将禁用 1 到 10，以及每年的 1 月 22 日和 24 日到 3 月；

['* * * 0,6'] 将禁用所有周六和周日；

['01 07 2012', '02 07 2012', '* 08 2012'] 将禁用 2012 年 7 月 1 日和 2 日以及整个 2012 年 8 月

默认为 FALSE，没有禁用日期。

禁用所有日期且未指定至少一个启用日期会将脚本发送到无限循环中搜索启用的日期展示日期！

启用日期

混合
启用日期的数组，格式与所需的相同 “disabled_dates”属性。配合使用 “disabled_dates”属性，首先设置“disabled_dates” 属性类似于“[* * * ]”（这将禁用一切）并将“enabled_dates”属性设置为“[ * * 0,6]” 仅在周末启用。默认为 FALSE。

假设我的任务创建日期是 2015-04-21，有人可以告诉我一个禁用此日期之前所有日期的好方法吗？

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

为什么不使用direction-选项？您可以为此指定日期：

$('input').Zebra_DatePicker({
    direction: ['2015-04-21', false]
});

来自文档：

可以选择未来的日期，从特定日期开始

Demo

【讨论】：

【解决方案2】：

我有一个解决方案。事实证明，如果 Date 上有一个名为 dp_disabled 的 CSS 类，它会禁用这些日期上的点击事件！

因此，使用回调onChange() 函数，我可以将此 CSS 类应用于指定日期之前的所有日期！效果很好...

onChange: function(view, elements) {

    // on the "days" view...
    if (view == 'days') {

      // iterate through the active elements in the view
      elements.each(function() {


        //if Date is before the Task created date, then add a CSS Class.
        var taskCreatedDate = new Date('2015-04-23');
        var currentDay = new Date($(this).data('date'));

        if (currentDay < taskCreatedDate){

          $(this).addClass('dp_disabled');

        }
      });

    }
},

【讨论】：