Need to highlight range of dates in jquery datepicker [duplicate]

4
votes

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.

1
jquery-ui
none of the solution worked for me. – Charlie Gates
You need to be more specific why the other solutions won't work for you. Otherwise you're just going to get the same answers. – JJJ
only start and end date got highligted in those solutions. i want the whole range of dates in between them to get highlighted. – Charlie Gates

1 Answers

11
votes

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/