Customize specific disabled dates within a range using jQuery UI datepicker

Question

I'm using jQuery UI datepicker for a form where users request a tour of the school. There is a date range that the tours are being held, and within that range the site admin may disable certain days that are booked. No problem so far:

/* array of booked dates generated from CMS backend */
var disabledDates = [
    '2015-05-06',
    '2015-05-08' // examples
];

$('[name="date_of_visit"]').datepicker({
    minDate: '4/30/2015', // Range start
    maxDate: '10/1/2015', // Range end
    beforeShowDay: function(date) { // Disable custom dates
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, disabledDates) == -1];
    }
});

I got the beforeShowDay code from this post: Jquery UI datepicker. Disable array of Dates

I know I can add a class to the disabled elements with the second parameter but it adds it to all the disabled dates, including those outside of minDate and maxDate :

beforeShowDay : A function that takes a date as a parameter and must return an array with:

0: true/false indicating whether or not this date is selectable
1: a CSS class name to add to the date's cell or "" for the default presentation
2: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

However the client has requested that only the "booked" dates have a visual indication that the date is not available (distinct from the default disabled state). There will not be many, maybe 4 or 5. It makes sense to me.

Is there some way to customize only the dates disabled by the beforeShowDay function in my setup, or another solution to achieve what I'm after? jsFiddle demo

Answer 1

Wesley, I looked at your requirement and looked at the requirement you were in need of and I think as it can be also required by me as it was bit unique in itself so I researched the code and made what you wanted. I am pasting the code below with a bit of explanation of the same:-

Below is the Jquery Code:-

var disabledDates = [
    '2015-05-06',
    '2015-05-08'
];

$('input').datepicker({
    minDate: '4/30/2015',
    maxDate: '10/1/2015',
    beforeShowDay: function(date){
         var str = jQuery.datepicker.formatDate('yy-mm-dd', date);
         var minDateArr = $(this).datepicker( "option", "minDate" ).split('/')

        var minDate = new Date(minDateArr[2],minDateArr[0]-1,minDateArr[1]); //Don't remove the -1 from minDateArr[0]-1 as the Javascript dates starts with 0.
        if ($.inArray(str, disabledDates) != -1){
            return  [false, 'special']
        }
        else if(date < minDate ){
             return [false, 'not-special']
        }
        else{
            return [true,"special"];
        }
    }
});

A bit of Manipulation in the CSS:-

.special span {
    color: red !important; /* should only apply to may 6 and 8 */
}
.not-special span {
    color: green !important; 
}

And the most important there has to be a input tag:-

<input>

Also below is the Js Fiddle link for the same:- http://jsfiddle.net/ckk6hzzu/

Hope this is what was required by you and expecting this will help others where it can be used for booking/reservation sites.