選択した日にどのようにクラスを追加できますか？

Question

私はjquery ui dateの範囲で作成した予約フォームを持っています。私は最初と最後のクラスを追加したいと思います。

たとえば、私は最初の日にfirst-day-selectedクラスを追加したいと思います。最後の日付にはlast-day-selectedクラスを追加します。

そして私は、これらの日の間に別のクラスを与えたいと思うか、私は不透明度を与えたいが、これは

必要はありません可能な場合、私は何かを検索するが、私は私の日付ピッカーを申請することができませんでした。

function datePicker() { 
 

 
    var dateFormat = "DD/MM/YY", 
 
    from = $("#checkin,.checkin").datepicker({ 
 
     numberOfMonths: 2, 
 
     firstDay: 1, 
 
     minDate: 0, 
 
     onSelect: function(selectedDate) { 
 
     window.setTimeout($.proxy(function() { 
 
      $(this).parents(".book-holiday").find("#checkout,.checkout").focus(); 
 
     }, this), 10); 
 
     var yenitarih = new Date(); 
 
     var date = $(this).datepicker('getDate'); 
 
     var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1)); 
 
     var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 15)); 
 
     console.log(checkoutEndDate); 
 
     $("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate); 
 
     $("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate); 
 
     }, 
 
     isTo1: true, 
 
     beforeShowDay: function(date) { 
 
     var selectedDate = $(this).datepicker('getDate'), 
 
      fromDate = from.datepicker('getDate'); 
 

 
     if (!fromDate || !selectedDate) { 
 
      return [true] 
 
     } 
 
     var dateClass = ''; 
 
     if (date > fromDate && date < selectedDate) { 
 
      dateClass = 'between-date'; 
 

 
     } else if (+date == +selectedDate) { 
 
      dateClass = 'end-date'; 
 
     } 
 
     return [true, dateClass]; 
 

 
     } 
 
    }); 
 
    $("#checkout,.checkout").datepicker({ 
 
    numberOfMonths: 2, 
 
    firstDay: 1, 
 
    minDate: 0, 
 
    isTo1: true, 
 
    beforeShowDay: function(date) { 
 
     var selectedDate = $(this).datepicker('getDate'), 
 
     fromDate = from.datepicker('getDate'); 
 

 
     if (!fromDate || !selectedDate) { 
 
     return [true] 
 
     } 
 
     var dateClass = ''; 
 
     if (date > fromDate && date < selectedDate) { 
 
     dateClass = 'between-date'; 
 

 
     } else if (+date == +selectedDate) { 
 
     dateClass = 'end-date'; 
 
     } 
 
     return [true, dateClass]; 
 

 
    } 
 
    }); 
 
} 
 

 
datePicker();

.end-date a.ui-state-active { 
 
    color: yellow; 
 
} 
 

 
.between-date a.ui-state-default { 
 
    color: blue!important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 

 
<div class="book-holiday"> 
 
    From <input type="text" class="checkin" /> To <input type="text" class="checkout" /> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 1

あなたは、特定の日付にクラスを追加するbeforeShowDayを使用することができます。その後、$("#checkout") datepickerにクラスを追加するのは、2回目を開いて両方の日付が選択された後です。私はあなたが探している正確に動作わからないので、これは一例です：

function datePicker() { 
 

 
    var dateFormat = "DD/MM/YY", 
 
    from = $("#checkin,.checkin").datepicker({ 
 
     numberOfMonths: 2, 
 
     firstDay: 1, 
 
     minDate: 0, 
 
     onSelect: function(selectedDate) { 
 
     window.setTimeout($.proxy(function() { 
 
      $(this).parents(".book-holiday").find("#checkout,.checkout").focus(); 
 
     }, this), 10); 
 
     var yenitarih = new Date(); 
 
     var date = $(this).datepicker('getDate'); 
 
     var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1)); 
 
     var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 15)); 
 
     console.log(checkoutEndDate); 
 
     $("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate); 
 
     $("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate); 
 
     }, 
 
     isTo1: true, 
 
    }); 
 
    $("#checkout,.checkout").datepicker({ 
 
    numberOfMonths: 2, 
 
    firstDay: 1, 
 
    minDate: 0, 
 
    isTo1: true, 
 
    beforeShowDay: function(date) { 
 
     var selectedDate = $(this).datepicker('getDate'), 
 
     fromDate = from.datepicker('getDate'); 
 

 
     if (!fromDate || !selectedDate) { 
 
     return [true] 
 
     } 
 
     var dateClass = ''; 
 
     if (date > fromDate && date < selectedDate) { 
 
     dateClass = 'between-date'; 
 

 
     } else if (+date == +selectedDate) { 
 
     dateClass = 'end-date'; 
 
     } else if (+date == +fromDate) { 
 
     dateClass = 'start-date'; 
 
     } 
 
     return [true, dateClass]; 
 

 
    } 
 
    }); 
 
} 
 

 
datePicker();

.end-date a.ui-state-active { 
 
    color: yellow; 
 
} 
 

 
.between-date a.ui-state-default { 
 
    color: blue!important; 
 
} 
 

 
.start-date.ui-state-disabled { 
 
    opacity: 1!important; 
 
} 
 

 
.start-date .ui-state-default { 
 
    color: yellow!important; 
 
    background: green!important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 

 
<div class="book-holiday"> 
 
    From <input type="text" class="checkin" /> To <input type="text" class="checkout" /> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>