Highlighting the dates between a start and end date in JQuery Datepicker

I have three datepickers - I have one datepicker which shows a six month span across the top, and then two date pickers beneath that applied to input fields. When the input fields are changed, I want the datepicker across the top of the webpage to highlight the start and end dates, and all the dates in between.

I have so far been able to get it to highlight both the start and end date as you can see in the following code, but I'd really appreciate someones help in how I should go about highlighting the days in between.

    var $test = $.datepicker.formatDate('yy-m-d', $('#date-start').datepicker('getDate'));
    var $test2 = $.datepicker.formatDate('yy-m-d', $('#date-end').datepicker('getDate'));

    var dates1 = {};
    dates1[$test] = 'first date';

    var dates2 = {};
    dates2[$test2] = 'second date';

    $( "#calendar" ).datepicker({
            firstDay: 1,
            numberOfMonths: 6,
            dateFormat: 'yy-mm-dd',
            beforeShowDay: function(date) {
            var search = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());

                    if (dates1[search]) {

                      return [true, 'highlight', dates1[search] || ''];

                    if (dates2[search]) {

                      return [true, 'highlight', dates2[search] || ''];


                    return [false, '', ''];

            onSelect: select_arrive,
            minDate: '+' +minimumLeadDays+ 'D',
            onChangeMonthYear: get_availability

Thanks for any help in advance!

Edit: Thanks for your help, I'll take a look at those links and see if I can figure it out - thanks again! :)



Thanks for everyone's help. I found the solution to what I wanted to do here:

Need to highlight range of dates in jquery datepicker

It was nice and simple to follow, and I hope it helps someone else :)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.