Need to highlight range of dates in jquery datepicker

jquery-ui

Solution

You can use the jQuery UI datepicker beforeShowDay function and inside it check if the date must be highlighted according to your range.

A function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, 1 equal to a CSS class name or "" for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

Example:

var date1 = new Date(2013, 4, 6);
var date2 = new Date(2013, 4, 17);

$(document).ready(function () {
    $('#datepicker').datepicker({
        beforeShowDay: function (date) {
            debugger
            if (date >= date1 && date <= date2) {
                return [true, 'ui-state-error', ''];
            }
            return [true, '', ''];
        }
    });
});

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/zz9u4/

Problem

I'm using jQuery UI to display an inline datepicker in this i have a start date and an end date. I want to highlight the dates in between them.

Original source

Related problems