javascript - 在 css 中选定的开始日期和结束日期之间的悬停效果

Question

我正在研究 website我希望在其中放置悬停效果 (如下图所示) 在所选之间(假设 7 月 26 日) 开始日期以及我们将在结束日期上选择的日期:

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

Answer 1

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

步骤:

1. 从所有 .ui-datepicker-calendar tr td.highlight-day

中删除 class= 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>