jQuery 日期选择器范围在悬停时突出显示

Question

我想突出显示悬停时两个日期之间的范围。我设法让它工作，但只能选择。

beforeShowDay: function(date) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#startdate").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#enddate").val());
    return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
}   

jsFiddle

要查看我想要的内容...请选择“开始日期”，然后选择“结束日期”，然后再次单击“结束”，您将看到以橙色突出显示的范围。当结束日期选择器仍然打开时，如何在悬停时突出显示该突出显示？

Answer 1

$(document).on('mouseover', '.ui-datepicker-calendar td', function() {
// default
$(".ui-datepicker-calendar td").removeClass("hover");
// default

// get parametrs
let month = $(this).attr("data-month");
    year = $(this).attr("data-year");
    day = $(this).find("a").text();
// get parametrs

// convert parametrs
let date = new Date(year, month, day);
    startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() - 1);
    endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);

if(date.getDay() == "6"){
    startDate = date;
    endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 13);
}
// convert parametrs

// check all dates
$(".ui-datepicker-calendar td").not(".ui-datepicker-unselectable").each(function() {
    let check_month = $(this).attr("data-month");
        check_year = $(this).attr("data-year");
        check_day = $(this).find("a").text();
        check_date = new Date(check_year, check_month, check_day);

    if(check_date >= startDate && check_date <= endDate){
        $(this).addClass("hover");
    }
});
// check all dates

});