jQuery DatePicker, select and interval of dates

Question

I'm trying to make a selection of dates with an interval of 5 days from the selected date.

I'm using the beforeShowDay method, but I can't find a way to get the currentDate and return a custom class for those days ( current + 4 ).

Answer 1

I have created a jsFiddle that will show how to do this. I picky backed on Yozomiri's answer in this SO post

Note that the datepicker instance will still only store the clicked date for the current date. jQuery Datepicker is designed to only allow one date to be selected. So you'll have to handled storing the multiple selected dates yourself.

Essentially:

$(function () {
    var $date = $('#date').datepicker({
        onSelect: function (dateText, inst) {
            var $picker = inst.dpDiv;
            var $allDates = $picker.find('table.ui-datepicker-calendar td'); // get all date elements

            //This is the important line.
            //Setting this to false prevents the redraw.
            inst.inline = false;

            //The remainder of the function simply preserves the 
            //highlighting functionality without completely redrawing.

            //This removes any existing selection styling.
            $picker.find('.ui-datepicker-current-day')
                .removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");

            //This finds the selected link and styles it accordingly.
            //You can probably change the selectors, depending on your layout.
            $picker.find('a').each(function () {
                if ($(this).text() == inst.selectedDay) {
                    // Remove current selected date styles
                    $picker.find('.ui-datepicker-current-day')
                        .removeClass('ui-datepicker-current-day')
                        .children()
                        .removeClass("ui-state-active");
                    // td element of current date
                    var $selectedDate = $(this).parent();
                    // index of current date within all of the dates
                    var index = $allDates.index($selectedDate);
                    $allDates.slice(index, index + 5)
                        .addClass('ui-datepicker-current-day')
                        .find('a').addClass('ui-state-active');
                }
            });
            alert($date.datepicker('getDate')); // the clicked date
        }
    });
});