javascript - 如何在日期选择器中设置两天之间的类(class)？

Question

我正在使用jquery ui datepicker，我想给类指定两个选定日期之间的所有行(td)，但我的datepicker不是日期范围，由于某种原因我必须这样使用，我的问题是如何设置选定的两天之间的 css 可以使用 jquery ui 还是仅使用 js？

$(function() {
  var ilktarih = ['2017-03-23'];
  var sontarih = ['2017-04-10']
  var bostarihler = ['2017-03-15', '2017-03-16', '2017-03-17', '2017-03-18', '2017-03-19', '2017-03-20', '2017-03-21', '2017-03-22', '2017-03-23', '2017-03-24', '2017-03-25', '2017-03-26', '2017-03-27', '2017-03-28', '2017-03-29', '2017-03-30'];
  var dolutarihler = ['2017-02-22', '2017-02-23', '2017-02-24', '2017-02-25', '2017-02-26', '2017-02-27', '2017-02-28', '2017-03-01', '2017-03-02', '2017-03-03', '2017-03-04', '2017-03-05', '2017-03-06', '2017-03-07', '2017-03-08', '2017-03-09', '2017-03-10', '2017-03-11', '2017-03-12', '2017-03-13', '2017-03-14'];
  var sstarihler = [];

  var dateFormat = "mm/dd/yy",
    from = $("#checkin").datepicker({
      changeMonth: true,
      numberOfMonths: 2,
      firstDay: 1,
      minDate: new Date(ilktarih),
      maxDate: new Date(sontarih),
      onSelect: function(selectedDate) {
        var yenitarih = new Date();

        var date = $(this).datepicker('getDate');
        date.setTime(date.getTime() + (1000 * 60 * 60 * 24))

        $("#checkout").datepicker("option", "minDate", date);
      },

      beforeShowDay: function(date) {
        var y = date.getFullYear().toString(); // get full year
        var m = (date.getMonth() + 1).toString(); // get month.
        var d = date.getDate().toString(); // get Day
        if (m.length == 1) {
          m = '0' + m;
        } // append zero(0) if single digit
        if (d.length == 1) {
          d = '0' + d;
        } // append zero(0) if single digit
        var currDate = y + '-' + m + '-' + d;

        if (jQuery.inArray(currDate, dolutarihler) >= 0) {
          return [false, "ui-highlight"];
        }

        if (jQuery.inArray(currDate, bostarihler) >= 0) {
          return [true, "ui-bos"];
        }

        if (jQuery.inArray(currDate, sstarihler) >= 0) {
          return [false, "ui-ss"];
        } else {
          return [true];
        }

      },
      isTo1: true,
    }).on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#checkout").datepicker({
      changeMonth: true,
      changeYear: true,
      firstDay: 1,
      numberOfMonths: 2,
      minDate: new Date(ilktarih),
      maxDate: new Date(sontarih),
      onSelect: function(selectedDate) {
        $("#checkin").datepicker("option", "maxDate", selectedDate);
      },
      beforeShowDay: function(date) {
        var y = date.getFullYear().toString(); // get full year
        var m = (date.getMonth() + 1).toString(); // get month.
        var d = date.getDate().toString(); // get Day
        if (m.length == 1) {
          m = '0' + m;
        } // append zero(0) if single digit
        if (d.length == 1) {
          d = '0' + d;
        } // append zero(0) if single digit
        var currDate = y + '-' + m + '-' + d;

        if (jQuery.inArray(currDate, dolutarihler) >= 0) {
          return [true, "ui-highlight-donus"];
        }


        if (jQuery.inArray(currDate, bostarihler) >= 0) {
          return [true, "ui-bos"];
        }


        if (jQuery.inArray(currDate, sstarihler) >= 0) {
          return [true, "ui-ss-donus"];
        } else {
          return [true];
        }

      }
    }).on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
    });

  function getDate(element) {
    var date;
    try {
      date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
      date = null;
    }

    return date;
  }
});

.form {
  width: 960px;
  margin: 120px auto;
}

.form input {
  width: 250px;
  padding: 10px;
}

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


<div class="form">
  <input type="text" id="checkin" />
  <input type="text" id="checkout" />
  <input type="submit" value="Ara" />
</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 回调。

$('input').datepicker({
  beforeShowDay: function (date) {
    var endDate = $('.end_date').datepicker('getDate');
    var startDate = $('.start_date').datepicker('getDate');
    if (date >= startDate && date <= endDate) {
      return [true, 'my-custom-class', '']; //In range
    }
    return [true, '', '']; //Default return
  }
});

文档引用:

https://api.jqueryui.com/datepicker/#option-beforeShowDay