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

时间：2017-07-17 09:28:14

标签： html css datepicker

我有日期选择（开始日期和结束日期）。点击结束日期，我需要用红色突出显示开始日期，当鼠标移动时我需要用黄色突出显示。点击结束日期，它应该有所有突出显示的颜色，如图所示。但我无法进行颜色更改。任何人都可以帮我解决问题。

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

。date picker example

1 个答案:

答案 0 :(得分：6)

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

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题