Question

当您悬停在1个日期时，如何在日期选择器中突出显示接下来的7个工作日？

我希望从我徘徊的日期开始接下来的7天例如如果我在2016年8月2日盘旋 - 接下来的日期将是8月3日至8月10日（7个工作日）。我能够使用momentjs实现这一目标。但是，我希望能够使用mouseover事件在datepicker上突出显示这些日期。然后移除mouseleave

上的突出显示

这是我到目前为止所尝试的：

$('#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');
         }
    }
}

上述功能仅在悬停日期为8月2日时才能正常工作，并且与其他日期无法正常工作。

Answer 1

以下是我如何完成它：

$(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突出显示多个日期

1 个答案: