我有一个预订应用程序，我必须在日期范围选择器中禁用已预订的日期

Question

html 格式的日期范围

 <div class="form-group " id="input-dates">
<input class="form-control date-range-picker" id="dateRange" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
<i class="icon_calendar"></i>
</div>

我必须将来自 mysql 数据库的日期范围传递给日期范围选择器以禁用它们

function myCallback(start, end) {
  console.log("callback");

  $("#dateRange_n").html(
    start.format("MM DD, YYYY") + " - " + end.format("MM D, YYYY")
  );
}

let options = {
  startDate: "12-01-2018",
  endDate: "12-01-2023",
  minDate: "10-06-2021",
  isInvalidDate: function(ele) {
    var compareDate = moment(ele);
    var startDate = moment("12/01/2019", "DD/MM/YYYY");
    var endDate = moment("5/06/2021", "DD/MM/YYYY");
    return compareDate.isBetween(startDate, endDate);
  },
};

$("#dateRange_n").daterangepicker(options, myCallback);

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"> 
</script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"> 
   </script>
<script type="text/javascript" 
src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" 
href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="form-group" id="input-dates">
  <input class="form-control date-range-picker" id="dateRange_n" type="text" name="dates" 
placeholder="test...." autocomplete="off" required />
  <i class="icon_calendar"></i>
 </div>

我得到日期表格数据库如下：

<?php  
$this->db->select('booking_date');
  $this->db->where('listing_id', $listing_details['id']);
  $records = $this->db->get('booking');
    $res = $records->result_array();  ?>

我在哪里得到日期范围如下

Array ( [0] => Array ( [booking_date] => 2021-06-05 - 2021-06-06 ) [1] => Array ( [booking_date] => 2021-06-15 - 2021-06-16 ) [2] => Array ( [booking_date] => 2021-06-17 - 2021-06-18 ) [3] => Array ( [booking_date] => 2021-06-19 - 2021-06-20 ) )

Answer 1

为此使用 Litepicker(https://litepicker.com/)。

使用此参数初始化 Litepicker：

      disallowLockDaysInRange: true,
      lockDays: locked,
      highlightedDays: locked,

“锁定”变量示例：

var locked = [["2021-09-25","2021-09-29"],["2021-10-11","2021-10-14"],["2021-10-16","2021-10-26"],["2021-10-27","2021-10-31"],["2021-07-05","2021-07-10"],["2021-07-26","2021-08-01"],["2021-08-02","2021-08-11"],["2021-09-05","2021-09-10"],["2021-08-26","2021-09-01"],["2021-11-12","2021-11-19"],["2021-02-25","2021-04-25"],["2021-09-14","2021-09-24"],["2021-07-11","2021-07-25"],["2021-08-12","2021-08-18"]];