JS datepicker highlight multiple dates

Question

How do you highlight the next 7 business days in a datepicker when you hover on 1 date?

I wanted to get the next 7 days from the date i am hovering, e.g. if I hover on Aug 2, 2016 - the next dates would be from Aug 3 - Aug 10 (7 business days). I was able to achieve this using momentjs. However, I wanted to be able to highlight these dates on the datepicker using the mouseover event. Then remove the highlight on mouseleave

this is what i have tried so far:

$('#myDatepicker').datepicker({
    // beforeshow and onselect functions
}).on('mouseover', '.ui-state-default', function () {
    highlightDates($(this), true);
}).on('mouseleave', '.ui-state-default', function() {
    highlightDates($(this), false);
});

function highlightDates(element, add_class) {
    var addDays = 7;
    var hoverDate = element.text();

    for (var i = 1; i < addDays; i++) {
            var dates = firstSelect.clone().add(i, 'days').format('YYYY-MM-DD');

            // add another day if date is a weekend
            if (moment(dates).day() == 6) {
                addDays = addDays + 1;
            }

            if (moment(dates).day() == 7) {
                addDays = addDays + 1;
            }

            selectedDays = addDays;

            rangeDate.push(dates);
        }

        if (add_class) {

            element.addClass('rangeClass');
            element.addClass('firstRangeClass');

            $('.ui-datepicker-calendar td')
                .nextAll()
                .slice(hoverDate, addDays)
                .find('.ui-state-default')
                .addClass('rangeClass');
         }
    }
}

The above function only works properly if the hovered date is Aug 2 and does not work properly with other dates.

primehalo primehalo · Accepted Answer · 2017-01-14T00:20:57

Here is how I accomplished it:

$(document).ready(function() {
    $('#myDatepicker').datepicker({

    }).on('mouseover', '.ui-state-hover', function () {
        var addDays = 7;
        var $a = $(this)
        var $td = $a.closest('td');
        var $table = $td.closest('table');
        var day = $a.text().trim();
        var month = $td.data('month');
        var year = $td.data('year');
        var dateStr = year + "-" + ("0" + (month + 1)).slice(-2) + "-" + ("0" + day).slice(-2);
        var theDateObj = $.datepicker.parseDate("yy-mm-dd", dateStr)
        for (var i = 0; i < addDays; i++) {
            theDateObj.setDate(theDateObj.getDate() + 1);
            var theYear = theDateObj.getFullYear();
            var theMonth = theDateObj.getMonth();
            var theDate = theDateObj.getDate();
            var theDay = theDateObj.getDay()
            if (theDay == 0 || theDay == 6) { // Skip Sunday and Saturday
                addDays++;
                continue;
            }
            var $theTd = $table.find('td[data-year="'+theYear+'"][data-month="'+theMonth+'"]').filter(function(index) {
                return $(this).find('a').text().trim() == theDate;
            });
            if ($theTd) {
                $theTd.addClass('rangeClass');
            }
        }
    }).on('mouseout', 'tbody', function() {
        $(this).find('td.rangeClass').removeClass('rangeClass');
    });
});

JS datepicker highlight multiple dates

1 Answers