在CSS中选择的开始日期和结束日期之间悬停效果

Question

我正在website上工作，我希望在选定的位置之间（假设7月26日）将悬停效果 (as shown below in an image) > start date 以及我们将在end date上选择的日期：

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

HTML：

<div class="dates">
   <div class="start_date" style="width:50%;margin-right:3%;">
      <input readonly="readonly" class="form-control start_date  mb-4" type="text" placeholder="start date" id="startdate_datepicker">
   </div>
   <div class="end_date" style="width:50%;margin-left:3%;">
      <input readonly="readonly" class="form-control  end_date  mb-4" type="text" placeholder="end date" id="enddate_datepicker">
   </div>
</div>

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中添加什么代码，以便悬停在所选的开始日期和结束日期之间生效，用户将从end date section中选择类似于airbnb网站。

Answer 1

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

步骤：

1. 从所有highlight-day

中删除class = .ui-datepicker-calendar tr td.highlight-day

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

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;
}

<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dates">
   <div class="start_date" style="width:50%;margin-right:3%;">
      <input readonly="readonly" class="form-control start_date  mb-4" type="text" placeholder="start date" id="startdate_datepicker">
   </div>
   <div class="end_date" style="width:50%;margin-left:3%;">
      <input readonly="readonly" class="form-control  end_date  mb-4" type="text" placeholder="end date" id="enddate_datepicker">
   </div>
</div>