Hover effect in between the selected start date an

问题:

I am working on a website in which I want the hover effect to be place (as shown below in an image) in between the selected (Suppose July 26th) start date and the dates which we will select on the end date:

The HTML and JS/JQuery code which I have used are as follows:

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 code:

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, '','']
  }
});

Problem Statement:

I am wondering what code I need to add in the CSS so that hover comes in effect in between the selected start date and the end date which the users will select from the end date section similar to airbnb website.

回答1:

Below is one simple demo for highlight days between start date and hover date.

The steps:

1. remove class=highlight-day from all .ui-datepicker-calendar tr td.highlight-day

2. find out all .ui-datepicker-calendar tr td then loop&add css class=highlight-day until reach the hover date.

3. uses css selector .highlight-day a:not(.disable-day) to highlight the days.

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>