Highlight specific dates in Jquery UI Datepicker

Question

I've read the other questions like this here, but none does exactly what I want.

I want to add a class to all the days between two dates. The dates will be set in variables.

Any thoughts?

Solution

You need to implement the beforeShowDay event for the datepicker:

The 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(s) 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.

So you need to do something like:

$("#datepicker").datepicker({
    beforeShowDay: function(d) {
        var a = new Date(2012, 3, 10); // April 10, 2012
        var b = new Date(2012, 3, 20); // April 20, 2012
        return [true, a <= d && d <= b ? "my-class" : ""];
    }
});

Demo:

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(d) {
      // a and b are set to today ± 5 days for demonstration
      var a = new Date();
      var b = new Date();
      a.setDate(a.getDate() - 5);
      b.setDate(b.getDate() + 5);
      return [true, a <= d && d <= b ? "my-class" : ""];
    }
  });
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");

.my-class a {
  background: #FC0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<input id="datepicker">

Another demo here

Comments

[Spoeken]

That worked perfectly! An important thing to remember is that the month have to be minus one, like you have done in your code. Thanks a lot!