我在表单中使用了日期范围选择器如何禁用从 MySQL 数据库中获取的特定日期范围

Question

我必须禁用多个日期范围。

我用过的函数如下

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();  ?>

我得到 $res 的地方如下：

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

这里我必须从 mysql 数据库中获取日期范围并禁用它

Answer 1

我必须创建自己的表格，因为您没有在问题中提供表格，但您应该能够更改 SQL 语句以获得正确的开始和结束日期，它会为您工作。

Database Image

<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
if(!isset($_SESSION)){
    session_start();
}
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "test"; /* Database name */

$conn = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}


     $sql = "SELECT * FROM date";

     $result = $conn->query($sql);
       
     $row = mysqli_fetch_assoc(mysqli_query($conn,$sql));

     $startDate = $row['startDate'];

     $endDate = $row['endDate'];

?>

<script>
    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("<?php echo $startDate ?>", "DD/MM/YYYY");
    var endDate = moment("<?php echo $endDate ?>", "DD/MM/YYYY");
    return compareDate.isBetween(startDate, endDate);
  },
};

$("#dateRange_n").daterangepicker(options, myCallback);
</script>