如何着色选定的datepicker天？

Question

我有一个ui datepicker预订，我想为我的第一个和最后一个选定的日子上色，如下图所示

  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

您可以覆盖jquery-ui.css选择器，该选择器设置为在第一天显示您看到的类似颜色的颜色。

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

您可以添加更多关于您需要做什么的信息吗？