選択した日付ピッカー日にどのように色分けしますか？

Question

私は予約のUI DatePickerのを持っていると私はあなたがjqueryのを上書きすることができ、画像

var dateFormat = "DD/MM/YY", 
 
    from = $("#checkin,.checkin").datepicker({ 
 
     firstDay: 1, 
 
     minDate: 0, 
 
     showButtonPanel: true, 
 
     closeText: 'Temizle', 
 
     onClose: function(dateText, inst) { 
 
     if ($(window.event.srcElement).hasClass('ui-datepicker-close')) { 
 
      document.getElementById(this.id).value = ''; 
 
      //$('.checkin,#checkin,#checkout,.checkout').val(''); 
 
     } 
 
     }, 
 
     onSelect: function(date) { 
 
     window.setTimeout($.proxy(function() { 
 
      $(this).parents(".book-holiday").find("#checkout,.checkout").focus(); 
 
     }, this), 10); 
 
     var date2 = $('#checkin,.checkin').datepicker('getDate'); 
 
     date2.setDate(date2.getDate() + 1); 
 
     //$('#dt2').datepicker('setDate', date2); 
 
     //sets minDate to dt1 date + 1 
 
     $('#checkout,.checkout').datepicker('option', 'minDate', date2); 
 
     }, 
 
     isTo1: true, 
 
     beforeShow: function(input, inst) { 
 
     $(this).datepicker("widget").addClass("main-datepicker"); 
 
     } 
 
    }); 
 
    $("#checkout,.checkout").datepicker({ 
 
    firstDay: 1, 
 
    minDate: 0, 
 
    showButtonPanel: true, 
 
    closeText: 'Temizle', 
 
    onClose: function(dateText, inst) { 
 
     if ($(window.event.srcElement).hasClass('ui-datepicker-close')) { 
 
     document.getElementById(this.id).value = ''; 
 
     //$('.checkin,#checkin,#checkout,.checkout').val(''); 
 
     } 
 
     var dt1 = $('#checkin,.checkin').datepicker('getDate'); 
 
     console.log(dt1); 
 
     var dt2 = $('#checkout,.checkout').datepicker('getDate'); 
 
     if (dt2 <= dt1) { 
 
     var minDate = $('#checkout,.checkout').datepicker('option', 'minDate'); 
 
     $('#checkout,.checkout').datepicker('setDate', minDate); 
 
     } 
 
    }, 
 
    isTo1: true, 
 

 
    onSelect: function(selectedDate) { 
 
     $(this).parents(".book-holiday").find(".popover-wrapper").addClass("open"); 
 
    }, 
 
    beforeShow: function(input, inst) { 
 
     $(this).datepicker("widget").addClass("main-datepicker"); 
 
    } 
 

 
    });

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> From : <input type="text" class="checkin"> To: <input type="text" class="checkout"> 
 

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

Codepen Demo

Answer 1

以下のような色の選択私の最初と最後の日にしたいですあなたが最初の日にこのようなものに見える色を表示するように設定されている-ui.cssセレクタ。

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight 
{ 
    background: #e96e5e; 
} 

あなたは何をする必要があるかに関する情報を少し追加できますか？