如何设置两天到日期选择器之间的课程？

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