如何選擇彩色天日期選擇器？

我有一個UI日期選擇器來預訂，我想有色我第一次也是最後一次選擇的天像下圖如何選擇彩色天日期選擇器？

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

來源

2017-07-19 ani_css

您可以覆蓋的jQuery -ui.css選擇器設置爲在第一天顯示您看到的顏色。

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

您可以添加更多關於您需要做什麼的信息嗎？

來源

2017-07-19 11:24:17 JohnLeToy

我有日期範圍，你看，如果我選擇了從第一日期選擇器，每天我的日期必須是彩色的，我要看到這一天我的第二個日期選擇器，如果我從第二個日期選擇器選擇一天它必須是彩色too.as您在圖像感謝 –

看到我不能肯定，如果你只需要第一天和最後一天是在顏色或f.day + l.day +範圍（其它顏色）。這裏是一個鏈接有什麼，我想可以幫你[鏈接]（http://wp-hostel.com/articles/jquery-datepicker-tweaks.php） – JohnLeToy

如何選擇彩色天日期選擇器？

回答

相關問題