javascript - 如何使用输入数据库的日期禁用日期选择器中的日期？

Question

我想要实现的是屏蔽 Jquery Datepicker 中已预订的日期。到目前为止，我已经成功构建了一个工作表单，其中包含一个功能正常的 Datepicker，它使用 $_POST 将数据发送到我的数据库。我知道我应该使用 BeforeShowDay Jquery 函数，但我不太清楚如何实现它。让我引导您完成我的代码。

<?php require_once('inc/header.php');

使用PDO连接数据库并使用prepare输入数据。一切正常。

require('database.php');

$stmt = $db->prepare("INSERT INTO besucher (name, surname, email, guests, fromDate, toDate, questions) VALUES (?, ?, ?, ?, ?, ?, ?)");
$stmt->bindParam('1', $_POST['Name']);
$stmt->bindParam('2', $_POST['LastName']);
$stmt->bindParam('3', $_POST['Email']);
$stmt->bindParam('4', $_POST['Guests']);
$stmt->bindParam('5', $_POST['From']);
$stmt->bindParam('6', $_POST['To']);
$stmt->bindParam('7', $_POST['Questions']);
$stmt->execute();

这是我从数据库检索信息的地方。

    try {
        $results = query("SELECT fromDate, toDate FROM besucher");

    } catch (Exception $e) {
        echo "Data could not be retrieved from the database.";
        exit;
    }

?>

表单本身。

<!-- Begin page content -->
<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="page-header">
      <h1>Make a booking enquiry</h1>
      </div>
    </div>
  </div><!--endrow-->
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <form role="form action="form.php" method="post">
        <div class="form-group">
          <label for="Name">First Name</label>
          <input type="text" class="form-control" id="Name" name="Name" placeholder="Enter First Name" required>
        </div>
        <div class="form-group">
          <label for="LastName">Surname</label>
          <input type="text" class="form-control" id="LastName" name="LastName" placeholder="Enter Surname" required>
        </div>
        <div class="form-group">
          <label for="Email">Email</label>
          <input type="email" class="form-control" id="Email" name="Email" placeholder="Enter Email" required>
        </div>    
        <div class="form-group">
          <label for="Guests">Number of Guests</label>
          <input type="number" id="Guests" class="form-control" name="Guests" placeholder="z.b. 4" required>
        </div>        
        <div class="form-group">
          <label for="From">From <span class="glyphicon glyphicon-calendar"></span></label>
          <input type="text" id="From" name="From" class="form-control" required>
        </div>
        <div class="form-group">     
          <label for="To">To <span class="glyphicon glyphicon-calendar"></span></label>
          <input type="text" id="To" name="To" class="form-control" required>      
        </div>
        <div class="form-group">
          <label for="textarea">Questions?</label>
          <textarea class="form-control" id="textarea" name="Questions" rows="3"></textarea>             
        </div>
        <div class="form-group">
          <label for="checkbox" class="sr-only">Checkbox</label>
          <input id="checkbox" type="checkbox"> I would like to recieve emails from Muscheltraum              
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>     
    </div>
  </div><!--endrow-->
</div><!--container-->
</div><!--wrap-->

<?php require_once('inc/footer.php'); ?>

这是 datepicker.js 文件代码，我想在其中放置 BeforeShowDay 函数。不幸的是，我不知道如何将 SELECT 查询中的 fromDate 和 toDate 获取到我的日期选择器中，以及如何将其融入到下面的代码中。这真的很令人沮丧，因为我确切地知道我想做什么以及各个部分应该如何组合在一起，但我就是不知道如何实现它。

来自 Jquery UI API

beforeShowDayType: Function( Date date )

Default: null
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is displayed.




    $.datepicker.setDefaults( $.datepicker.regional[ "de" ] );

    $(function() {
      $( "#From" ).datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        numberOfMonths: 1,
        gotoCurrent: true,
        minDate:0,
        maxDate: "+1y", 
        onClose: function( selectedDate ) {
          $( "#To" ).datepicker( "option", "minDate", selectedDate );
        }
      });
      $( "#To" ).datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        numberOfMonths: 1,
        gotoCurrent: true,
        maxDate: "+1y",
        onClose: function( selectedDate ) {
          $( "#From" ).datepicker( "option", "maxDate", selectedDate );
        }
      });
    });

Answer 1

基本想法，没有测试，但应该可行。

PHP

假设您在 PHP 数组中禁用了日期

$disablethese = array("2014-01-03","2014-01-13","2014-01-23");

使用 json_encode 打印 From Date 字段，并在 data 属性中禁用日期

<input type="text" id="From" name="From" class="form-control" required data-disablethese="<?=json_encode($disablethese)?>">

JQuery

var disablethese = $("#From").data("disablethese"); //this will auto-decode JSON to Array

现在您可以在 beforeShowDate 中使用 disablethese 变量

var disablethese = ["2014-01-03","2014-01-13","2014-01-23"];

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ disablethese.indexOf(string) == -1 ]
    }
});

JSFiddle Example