预订应用如何将MySQL已预订日期传入daterangepicker实现禁用？

步骤1：PHP侧格式化已预订日期数据 #

先把从数据库查询到的预订日期字符串处理为前端JS可直接识别的结构化数组，在原有的PHP查询代码后追加处理逻辑：

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

// 处理预订日期为结构化数组
$bookedRanges = [];
foreach ($res as $item) {
    // 拆分 "2021-06-05 - 2021-06-06" 格式的日期字符串
    list($start, $end) = explode(' - ', $item['booking_date']);
    $bookedRanges[] = [
        'start' => trim($start),
        'end' => trim($end)
    ];
}
// 转换为JSON字符串供前端读取
$bookedRangesJson = json_encode($bookedRanges);
?>

步骤2：调整daterangepicker配置逻辑 #

把PHP输出的预订日期数组传入JS，重写isInvalidDate校验逻辑，判断当前日期是否落在任意已预订区间内，返回true即代表禁用该日期：

// 直接读取PHP输出的已预订日期数组（如果JS代码在独立文件中，可通过HTML隐藏域中转，参考下方注意事项）
const bookedRanges = <?php echo $bookedRangesJson; ?>;

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) {
    const compareDate = moment(ele);
    // 遍历所有已预订区间判断
    for (let range of bookedRanges) {
      const bookedStart = moment(range.start, 'YYYY-MM-DD');
      const bookedEnd = moment(range.end, 'YYYY-MM-DD');
      // 第四个参数[]表示匹配时包含区间首尾日期，避免预订首尾日可被选中
      if (compareDate.isBetween(bookedStart, bookedEnd, null, '[]')) {
        return true;
      }
    }
    return false;
  },
};

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

适配独立JS文件的场景 #

如果你的daterangepicker配置代码在独立的JS文件中，无法直接嵌入PHP代码，可以通过HTML隐藏域中转数据：

1. 首先在页面HTML中插入隐藏输入框：

<input type="hidden" id="booked-ranges" value="<?php echo htmlspecialchars($bookedRangesJson); ?>">

2. 再在JS代码中读取解析：

const bookedRanges = JSON.parse($('#booked-ranges').val());

内容的提问来源于stack exchange，提问作者Priyanka Patil