在CSS中选定的开始日期和结束日期之间悬停效果 [英] Hover effect in between the selected start date and end date in css

问题描述

我正在一个网站中，我希望在其中放置悬停效果 (as shown below in an image) ，位于选定的(假设是7月26日) 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网站.

解决方案

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

步骤:

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> 

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.

解决方案

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>

这篇关于在CSS中选定的开始日期和结束日期之间悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！