1
日付選択（開始日と終了日）。終了日をクリックすると、開始日を赤色で強調表示する必要があります。終わりの日付をクリックすると、表示されている画像のように強調表示された色がすべて表示されます。しかし、色の変更はできません。誰でも問題を解決できるようにしてください。jquery 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;
\t text-align: center !important;
\t white-space:no-wrap;
\t font-size:10px;
}
table {
border-collapse: collapse !important;
\t margin:0;
}
.ui-datepicker-multi .ui-datepicker-group table{
width:100% !important;
}
<!-- .ui-datepicker-unselectable.ui-state-disabled{
border: 0 !important; \t
} -->
.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;
\t }
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({
\t \t changeMonth: false,
\t \t numberOfMonths: 2,
\t \t dateFormat: 'D, d MM' ,
\t \t dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
\t \t beforeShow: function(input, inst) {
\t \t insertMessageStartDate(); \t \t
},
\t onSelect: function(selectedDate) {
\t var selectedDate = $("#flexibledates").datepicker("getDate");
if (selectedDate != null) {
$('#flightdeparture').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
}
}
});
$('#flightdeparture').datepicker({
\t \t changeMonth: false,
\t \t numberOfMonths: 2,
\t \t dateFormat:'D, d MM' ,
\t \t dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
\t \t beforeShow: function(input, inst) {
\t \t insertMessageEndDate();
},
\t onSelect: function(selectedDate) {
$('#flexibledates').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date \t \t \t \t
}
\t
\t
\t
});
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>');
\t
\t \t }
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>');
\t $("#ui-datepicker-div tr td").click(function(){
\t $(this).prevUntil('.ui-datepicker-unselectable').css({"color": "red", "border": "2px solid red"});
\t \t \t });
\t \t }
else
insertMessageEndDate.timer = setTimeout(insertMessageEndDate, 10);
}
});
</script>。 
。 –
@HemaNandagopal更新された回答を確認してください –
素敵な仕事..それを維持して.. – brijrajsinh