Hover effect in between the selected start date and end date in css

Question

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.

@Dennis All my css codes are behind the domain (CTRL+U, I am pretty sure you know it). I have accepted the answer of Sphinx. You can have a look. — flash, Jul 27 '18 at 16:19
yes I thought about that, but I tought, maybe it is a part of the css what is usefull. Thanks for solution! Good luck with your site — Dennis, Jul 27 '18 at 16:25
@Dennis I have a similar [question](https://stackoverflow.com/questions/51560956/how-to-make-a-form-which-searches-an-item-around-a-specific-radius). I am wondering if you can have a look and give me some pointers. — flash, Jul 27 '18 at 16:26

score 1 · Accepted Answer · answered Jul 26 '18 at 22:00

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

The steps:

remove class=highlight-day from all .ui-datepicker-calendar tr td.highlight-day
find out all .ui-datepicker-calendar tr td then loop&add css class=highlight-day until reach the hover date.
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>

Thanks. It worked. I will let you know if I have any other question similar to that. — flash, Jul 27 '18 at 15:07
I am thinking that if there is a way we can put a geographic location for any product being searched. Suppose I am searching for a calculator then as soon as I hit `search radius` placeholder, a popup should appear at the bottom stating that till what radius I need to search for a product. I have posted my question [here](https://stackoverflow.com/questions/51560956/how-to-make-a-form-which-searches-an-item-around-a-specific-radius). Let me know if we can do that in js/juqery. — flash, Jul 27 '18 at 15:26

Hover effect in between the selected start date and end date in css

1 Answers1

Linked