CODEWITHSUNDEEP
jquerydatepicker
JasonDavis
JasonDavis

Reputation: 48933

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

I am using a jQuery Date Picker plugin called Zebra DatePicker:

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

I am using it on a Project Management app which opens Project Task records in a Modal DIV and sets up this DatePicker to select a Task Due Date.

The plugin has the option to Disable Dates from being Selected. The documentation for setting Date that can be disabled and enabled is shown below....

What my goal to do is, is to disable all dates that are prior than a Task creation Date so that a Due Date cannot be set to a date prior to the date the Task record was created!

This code is how you setup the Date picker on an input field and pass in options... 

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

Below is the documentation on disabling 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.

Assuming my Task Creation Date is 2015-04-21, can someone show me a good way to disable all dates prior to this date?

Upvotes: 0

Views: 3875

Answers (2)

empiric
empiric

Reputation: 7878

Why not use the direction-option? You can specify a date for that:

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

From the docs:

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

Demo

Upvotes: 2

JasonDavis
JasonDavis

Reputation: 48933

I got a solution. It turns out that if a Date has a CSS class named dp_disabled on it, that it disables the click events on those dates from being selected!

So using the Callback onChange() function, I can apply this CSS class to all dates prior to my specified date! Works great...

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

        }
      });

    }
},

Upvotes: 0

Related Questions