在日期之前禁用Zebra Date Picker jQuery插件中的所有日期

时间:2015-05-07 06:01:37

标签: jquery datepicker

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

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

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

该插件可以选择禁止日期被选中。设置日期可以是disabledenabled的文档如下所示....

我的目标是禁用所有早于Task creation Date的日期,以便Due Date无法设置为创建任务记录之前的日期!< / p>

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

的方式
$('#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,没有禁用日期。

     

禁用所有日期,而不是指定至少一个启用日期会将脚本发送到无限循环搜索以启用   日期显示!

enabled_dates

  

混合
  一系列启用日期,格式与所需格式相同   “disabled_dates”属性。与...一起使用   “disabled_dates”属性首先设置“disabled_dates”   属性为“[* * * ]”(将禁用所有内容)   并将“enabled_dates”属性设置为“[ * * 0,6]”到   只在周末开始。        默认值为FALSE。

假设我的任务创建日期为2015-04-21,有人可以告诉我在此日期之前停用所有日期的好方法吗?

2 个答案:

答案 0 :(得分:2)

为什么不使用direction - 选项? 您可以为其指定日期:

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

来自文档:

  
      
  1. 将来可以选择日期,从特定日期开始
  2.   

<强> Demo

答案 1 :(得分:0)

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

因此,使用Callback 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');

        }
      });

    }
},