longbill/jquery-date-range-picker

How to disable some special date?

Closed this issue · 3 comments

How to disable some special date? Like 2016-11-13, 2016-12-25 and more? Thanks~

Please have a look at http://longbill.github.io/jquery-date-range-picker/ and search for "Disable some dates". It uses a beforeShowDay callback which you can use to determine whether to enable / disable a date.

screen shot 2016-06-28 at 10 04 03

mijrs commented

Thanks, HoltKamp.

But can you please give a example how to use the 'beforeShowDay' callback for some specific date ranges? Like disable these two date ranges: 2017-02-23 till 2017-03-14 and 2017-03-25 till 2017-04-13.

Thanks in advance!

@mijrs well, you can use an array with all invalid dates and check whether a specific date is in that array, right? Copy-paste from some functionality below, 2 blocked dates are because of Eastern, others do not have a particular reason.

"beforeShowDay":function(date){
    date.setHours(12, 00, 00);
    var cssClass = '';
    var tooltipMessage = '';
    var dateLabel = date.toISOString().substr(0,10);
    var blockedDates = {"2017-02-05":"","2017-02-12":"","2017-02-19":"","2017-02-26":"","2017-03-05":"","2017-03-12":"","2017-03-19":"","2017-03-26":"","2017-04-02":"","2017-04-09":"","2017-04-16":"Eastern","2017-04-17":"Eastern","2017-04-23":""};
    
    var isDateBlocked = dateLabel in blockedDates;
    var isDateAvailable = !isDateBlocked;
    
    if(isDateBlocked){
        cssClass = 'blockedDateSomeRedWarningStyle';
        tooltipMessage = blockedDates[dateLabel];
    }
    
    return [isDateAvailable, cssClass, tooltipMessage];
}