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

问题描述

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 ) )

解决方法

为此使用 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"]];