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.
4
votes
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/