Highlight dates in specific range with jQuery's datepicker

Question

I need to highlight the dates between a start date and an end date, which I should be able to specify. Can anyone help me?

Answer 1

Late to the party, but here's a JSFiddle that I used to test:

https://jsfiddle.net/gq6kdoc9/

HTML:

JavaScript:

var dates = ['11/13/2017', '11/14/2017'];
   //tips are optional but good to have
   var tips = ['some description', 'some other description'];

   $('#datepicker').datepicker({
     dateFormat: 'dd/mm/yy',
     beforeShowDay: highlightDays,
     showOtherMonths: true,
     numberOfMonths: 3,
   });

   function highlightDays(date) {
     for (var i = 0; i < dates.length; i++) {
       if (new Date(dates[i]).toString() == date.toString()) {
         return [true, 'highlight', tips[i]];
       }
     }
     return [true, ''];
   }

And CSS:

td.highlight {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlight a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

Built on Mike's working example above!