hover在css中选定的开始日期和结束日期之间的效果

我正在一个网站上工作，我想在所选的（假设7月26日） start date 和我们将在end date 选择的日期 之间 放置hover效果 (as shown below in an image) ：

我使用的HTML和JS / JQuery代码如下：

HTML：

JS / JQuery代码：

 let startDateUI = $("#startdate_datepicker").datepicker({ numberOfMonths:[1, 2], todayHighlight: true, beforeShowDay: function (calDate) { return calDate - new Date() < 0 ? [false, '', ''] : [true, '',''] } }); $("#enddate_datepicker").datepicker({ numberOfMonths:[1, 2], todayHighlight: true, beforeShowDay: function (calDate) { let selectedStartDate = $( "#startdate_datepicker" ).datepicker( "getDate" ) return calDate - selectedStartDate < 0 ? [false, 'disable-day', 'not available day!!!'] : [true, '',''] } }); 

问题陈述：

我想知道我需要在CSS中添加什么代码，以便hover在选定的开始日期和结束日期之间生效 ，用户将从类似于airbnb网站的end date section选择。

Answer 1

下面是一个简单的演示，用于突出显示开始日期和hover日期之间的日期。

步骤：

1. 从所有.ui-datepicker-calendar tr td.highlight-day删除class = highlight-day .ui-datepicker-calendar tr td.highlight-day

2. 找出所有.ui-datepicker-calendar tr td然后循环并添加css class = highlight-day直到达到hover日期。

3. 使用css选择器.highlight-day a:not(.disable-day)来突出显示日期。

 let startDateUI = $("#startdate_datepicker").datepicker({ numberOfMonths:[1, 2], todayHighlight: true, beforeShowDay: function (calDate) { return calDate - new Date() < 0 ? [false, '', ''] : [true, '',''] } }); $("#enddate_datepicker").datepicker({ numberOfMonths:[1, 2], todayHighlight: true, beforeShowDay: function (calDate) { let selectedStartDate = $( "#startdate_datepicker" ).datepicker( "getDate" ) return calDate - selectedStartDate < 0 ? [false, 'disable-day', 'not available day!!!'] : [true, '',''] } }); $("#enddate_datepicker").datepicker('widget').on('mouseover', 'tr td', function () { if(!$( "#startdate_datepicker" ).datepicker( "getDate" )){ return }//this is hard code for start date let calendarId = $(this).closest('.ui-datepicker').attr('id') // clear up highlight-day class $('#' + calendarId + ' .ui-datepicker-calendar tr td.highlight-day').each((index, item) => { $(item).removeClass('highlight-day') }) // loop& add highligh-day class until reach $(this) let tds = $('#' + calendarId + ' .ui-datepicker-calendar tr td') for(let index = 0; index < tds.size(); ++index) { let item = tds[index] $(item).addClass('highlight-day') if($(item)[0].outerHTML === $(this)[0].outerHTML) { break } } }) 

 .disable-day{ color: gray; } .highlight-day a:not(.disable-day) { background-color: blue; }