在日期之前禁用 Zebra 日期选择器 jQuery 插件中的所有日期

Question

我正在使用名为 Zebra DatePicker 的 jQuery 日期选择器插件：

斑马日期选择器: http://stefangabos.ro/jquery/zebra-datepicker/
GitHub: https://github.com/stefangabos/Zebra_Datepicker/

我在项目管理应用程序上使用它，该应用程序在模式 DIV 中打开项目任务记录并将此 DatePicker 设置为 select 任务截止日期。

该插件可以选择禁止选择日期。设置日期可以是 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′] would disable January 1, 2012;

[‘* 1 2012′] would disable all days in January 2012;

[‘1-10 1 2012′] would disable January 1 through 10 in 2012;

[‘1,10 1 2012′] would disable January 1 and 10 in 2012;

[‘1-10,20,22,24 1-3 *’] would disable 1 through 10, plus the 22nd and 24th of January through March for every year;

[‘* * * 0,6′] would disable all Saturdays and Sundays;

[’01 07 2012′, ’02 07 2012′, ‘* 08 2012′] would disable 1st and 2nd of July 2012, and all of August of 2012

Default is FALSE, no disabled dates.

DISABLING ALL DATES AND NOT SPECIFYING AT LEAST ONE ENABLED DATE WILL SEND THE SCRIPT INTO AN INFINITE LOOP SEARCHING FOR AN ENABLED DATE TO DISPLAY!

enabled_dates

mixed
An array of enabled dates in the same format as required for “disabled_dates” property. To be used together with the “disabled_dates” property by first setting the “disabled_dates” property to something like “[* * * ]” (which will disable everything) and the setting the “enabled_dates” property to, say, “[ * * 0,6]” to enable just weekends. Default is FALSE.

假设我的任务创建日期是 2015-04-21，谁能告诉我一个禁用该日期之前所有日期的好方法？

Answer 1

我找到了解决办法。事实证明，如果日期上有一个名为 dp_disabled 的 CSS class，它会禁用这些日期的点击事件！

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

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');

        }
      });

    }
},

Answer 2

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

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

来自文档：

Dates can be selected in the future, starting with a specific date

Demo

在日期之前禁用 Zebra 日期选择器 jQuery 插件中的所有日期

Disable all Dates in Zebra Date Picker jQuery Plugin prior to a Date

jquery

datepicker