使用 jquery datepicker 悬停时使用不同颜色突出显示日期

【问题标题】：Highlighting the dates using different colors on hovering using jquery datepicker使用 jquery datepicker 悬停时使用不同颜色突出显示日期
【发布时间】：2017-07-17 09:28:14
【问题描述】：

我有日期选择（开始日期和结束日期）。单击结束日期时，我需要用红色突出显示开始日期，而当鼠标移动时，我需要用黄色突出显示。单击结束日期时，它应该有所有突出显示的颜色，就像显示的图像一样。但我无法更改颜色。谁能帮我解决这个问题。

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
  
  
.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background:0 !important;
   border: 0 !important;
    color: #9c9c9c !important;
   font-weight: bold;
	text-align: center !important;
	 white-space:no-wrap;
	 font-size:10px;
}
table {
    border-collapse: collapse !important;
	margin:0;
}
.ui-datepicker-multi .ui-datepicker-group table{
width:100% !important;
}

<!-- .ui-datepicker-unselectable.ui-state-disabled{
    border: 0  !important;	
} -->
.ui-datepicker-unselectable.ui-state-default{
display:none;
}
.ui-state-range{
background-color:#FBD2D3 !important;
color: #fff !important;
}
#ui-datepicker-div tr td:hover *,#ui-datepicker-div tr td > .ui-state-default.ui-state-hover,.ui-datepicker-current-day{
background-color:#F4777C !important;
color:#fff !important;
text-align:center !important;
}
thead::after
{
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
}
.ui-datepicker-today{
background-color:none !important;
}


.ui-datepicker td span, .ui-datepicker td a {
    text-align: center !important;
	}
tbody{
margin-left:10px !important;
margin-right:10px !important;
}
td{
 border:1px solid #F6F6F6 !important;
}

 #ui-datepicker-div{
  display: none;
    left: 8px;
    position: absolute;
    top: 31px;
    width: 50% !important;
    z-index: 1;
 
 }
 .ui-datepicker-header.ui-widget-header{
 background-color:#F6F6F6 !important;
 border:0 !important;
 font-weight: bold;
 color:#9c9c9c !important;
 }
 .ui-datepicker th{
 background-color:#F6F6F6 !important;
 border:0 !important;
 font-weight: normal;
 }
 .lowTicketValue{
 color:#326EA6;
 white-space:no-wrap;
     font-size: 10px;
 
 }
  .lowTicketValue:active{
 color:#fff !important;
  white-space:no-wrap;
 }
.ui-datepicker .ui-state-range {
    background: blue !important;
}
 
.ui-datepicker-calendar .highlight {background-color:#326EA6 !important;}
 .ui-state-range{
  background-color:#F4777C !important;
 }
 .highTicketValue{
 color:#F4777C !important;
 }

#ui-datepicker-div tr td:nth-child(2n+1) > span{
 color:#F4777C !important;

}
#ui-datepicker-div tr td:nth-child(2n+1):active > span , #ui-datepicker-div tr td:nth-child(2n+1):hover > span {
color:#fff !important;
}
.Highlighted a{
   background-color : Green !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}

  </style>
<input type="text" id="flexibledates" />
<input type="text" id="flightdeparture" />
<script>
  $( function() {
$('#flexibledates').datepicker({
		changeMonth: false,
		numberOfMonths: 2,
		dateFormat: 'D, d MM' ,
		dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		beforeShow: function(input, inst) {
		insertMessageStartDate();		
    },
	onSelect: function(selectedDate) {
               	 var selectedDate = $("#flexibledates").datepicker("getDate");                
                if (selectedDate != null) { 
                    $('#flightdeparture').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
                }
          }
});
$('#flightdeparture').datepicker({
		changeMonth: false,
		numberOfMonths: 2,
		dateFormat:'D, d MM' ,
		dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		beforeShow: function(input, inst) {
		insertMessageEndDate();
    },
	onSelect: function(selectedDate) {
                 $('#flexibledates').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date				 
          }
	
	  
	
});


function insertMessageStartDate(message) {
    clearTimeout(insertMessageStartDate.timer);
    
    if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')){
        $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');
	
  

		}
    else
        insertMessageStartDate.timer = setTimeout(insertMessageStartDate, 10);
}

function insertMessageEndDate(message) {
    clearTimeout(insertMessageEndDate.timer);
    // $("#flexibledates").datepicker("getDate").css({"background-color": "#F4777C !important", "color": "#fff !important"});
    if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')){

        $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');
	  $("#ui-datepicker-div tr td").click(function(){

	   $(this).prevUntil('.ui-datepicker-unselectable').css({"color": "red", "border": "2px solid red"});
			});


		}
    else
        insertMessageEndDate.timer = setTimeout(insertMessageEndDate, 10);
}
});
</script>

.

【问题讨论】：

    标签： html css datepicker


    【解决方案1】：

    您可以使用 datePicker 的beforeShowDay 方法检查开始日期和结束日期之间的日期。

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
    background: 0 !important;
    border: 0 !important;
    color: #9c9c9c !important;
    font-weight: bold;
    text-align: center !important;
    white-space: no-wrap;
    font-size: 10px;
  }
  
  table {
    border-collapse: collapse !important;
    margin: 0;
  }
  
  .ui-datepicker-multi .ui-datepicker-group table {
    width: 100% !important;
  }
  
  <!-- .ui-datepicker-unselectable.ui-state-disabled {
    border: 0 !important;
  }
  
  -->.ui-datepicker-unselectable.ui-state-default {
    display: none;
  }
  
  .ui-state-range {
    background-color: #FBD2D3 !important;
    color: #fff !important;
  }
  
  #ui-datepicker-div tr td:hover *,
  #ui-datepicker-div tr td>.ui-state-default.ui-state-hover,
  .ui-datepicker-current-day {
    background-color: #F4777C !important;
    color: #fff !important;
    text-align: center !important;
  }
  
  thead::after {
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
  }
  
  .ui-datepicker-today {
    background-color: none !important;
  }
  
  .ui-datepicker td span,
  .ui-datepicker td a {
    text-align: center !important;
  }
  
  tbody {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  td {
    border: 1px solid #F6F6F6 !important;
  }
  
  #ui-datepicker-div {
    display: none;
    left: 8px;
    position: absolute;
    top: 31px;
    width: 50% !important;
    z-index: 1;
  }
  
  .ui-datepicker-header.ui-widget-header {
    background-color: #F6F6F6 !important;
    border: 0 !important;
    font-weight: bold;
    color: #9c9c9c !important;
  }
  
  .ui-datepicker th {
    background-color: #F6F6F6 !important;
    border: 0 !important;
    font-weight: normal;
  }
  
  .lowTicketValue {
    color: #326EA6;
    white-space: no-wrap;
    font-size: 10px;
  }
  
  .lowTicketValue:active {
    color: #fff !important;
    white-space: no-wrap;
  }
  
  .ui-datepicker .ui-state-range {
    background: blue !important;
  }
  
  .ui-datepicker-calendar .highlight {
    background-color: yellow !important;
  }
  
  .ui-state-range {
    background-color: #F4777C !important;
  }
  
  .highTicketValue {
    color: #F4777C !important;
  }
  
  #ui-datepicker-div tr td:nth-child(2n+1)>span {
    color: #F4777C !important;
  }
  
  #ui-datepicker-div tr td:nth-child(2n+1):active>span,
  #ui-datepicker-div tr td:nth-child(2n+1):hover>span {
    color: #fff !important;
  }
  
  .Highlighted a {
    background-color: Green !important;
    background-image: none !important;
    color: White !important;
    font-weight: bold !important;
    font-size: 12pt;
  }
  
  .ui-red {
    background: red;
  }
  
  .highlight {
    background-color: yellow !important;
  }
</style>
<input type="text" id="flexibledates" />
<input type="text" id="flightdeparture" />
<script>
  $(function() {



    $('#flexibledates').datepicker({
      changeMonth: false,
      numberOfMonths: 2,
      dateFormat: 'D, d MM',
      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      beforeShow: function(input, inst) {
        insertMessageStartDate();
      },
      beforeShowDay: function(date) {
        var d = date.getTime();
        if ($("#flexibledates").datepicker("getDate") && $("#flightdeparture").datepicker("getDate") && d < $("#flightdeparture").datepicker("getDate").getTime() && d > $("#flexibledates").datepicker("getDate").getTime()) {
          return [true, 'ui-state-highlight', ''];
        } else {
          return [true, ''];
        }
      },
      onSelect: function(selectedDate) {
        var selectedDate = $("#flexibledates").datepicker("getDate");
        if (selectedDate != null) {
          $('#flightdeparture').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
      }
    });
    $('#flightdeparture').datepicker({
        changeMonth: false,
        numberOfMonths: 2,
        dateFormat: 'D, d MM',
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShow: function(input, inst) {
          $("#ui-datepicker-div td").off();

          $(document).on("mouseenter", "#ui-datepicker-div td", function(e) {

            $(this).parent().addClass("finalRow");
            $(".finalRow").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable");
            $(".finalRowRangeOtherTable").find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
            $(".finalRowRangeOtherTable").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");

            $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
            $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
          });

          $(document).on("mouseleave", "#ui-datepicker-div td", function(e) {

              $(this).parent().removeClass("finalRow");
              $("#ui-datepicker-div td").removeClass("highlight");

              $(".finalRowRange").removeClass("finalRowRange").find('.highlight').removeClass("highlight");
              $(".finalRowRangeOtherTable").removeClass("finalRowRangeOtherTable").find('.highlight').removeClass("highlight");

          });
        insertMessageEndDate();
      },
      beforeShowDay: function(date) {
        var d = date.getTime();
        if ($("#flexibledates").datepicker("getDate") && d == $("#flexibledates").datepicker("getDate").getTime()) {
          return [true, 'ui-red', ''];
        }
        if ($("#flexibledates").datepicker("getDate") && $("#flightdeparture").datepicker("getDate") && d < $("#flightdeparture").datepicker("getDate").getTime() && d > $("#flexibledates").datepicker("getDate").getTime()) {
          return [true, 'ui-state-highlight', ''];
        } else {
          return [true, ''];
        }
      },
      onSelect: function(selectedDate) {
        $('#flexibledates').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date				 
        $("#ui-datepicker-div td").off();

      $(document).on("mouseenter", "#ui-datepicker-div td", function(e) {

            $(this).parent().addClass("finalRow");
            $(".finalRow").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable");
            $(".finalRowRangeOtherTable").find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
            $(".finalRowRangeOtherTable").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");

            $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
            $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
          });

          $("#ui-datepicker-div td").on("mouseleave", function() {

              $(this).parent().removeClass("finalRow");
              $("#ui-datepicker-div td").removeClass("highlight");

              $(".finalRowRange").removeClass("finalRowRange").find('.highlight').removeClass("highlight");
              $(".finalRowRangeOtherTable").removeClass("finalRowRangeOtherTable").find('.highlight').removeClass("highlight");

          });

    }

  });


  function insertMessageStartDate(message) {
    clearTimeout(insertMessageStartDate.timer);

    if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {
      $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');



    } else
      insertMessageStartDate.timer = setTimeout(insertMessageStartDate, 10);
  }

  function insertMessageEndDate(message) {
    clearTimeout(insertMessageEndDate.timer);
    // $("#flexibledates").datepicker("getDate").css({"background-color": "#F4777C !important", "color": "#fff !important"});
    if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {

      $('.ui-state-default').after('<span class="lowTicketValue">' + 45555 + '</span>');
      $("#ui-datepicker-div tr td").click(function() {

        $(this).prevUntil('.ui-datepicker-unselectable').css({
          "color": "red",
          "border": "2px solid red"
        });
      });


    } else
      insertMessageEndDate.timer = setTimeout(insertMessageEndDate, 10);
  }
  });
</script>

    【讨论】：

    • 我还需要在悬停时突出显示。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-12-14
    • 2012-12-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode