如何使用输入数据库的日期禁用Datepicker中的日期？

Question

我想实现的是阻止已经预订的Jquery Datepicker中的日期。到目前为止，我已经设法构建了一个工作窗体，其中包含一个使用$ _POST将数据发送到我的数据库的Datepicker。我知道我应该使用BeforeShowDay Jquery函数，但我无法弄清楚如何实现它。让我通读我的代码。

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

使用PDO连接到数据库并使用准备输入数据。所有工作正常。

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

这是我想放上BeforeShowDay函数的datepicker.js文件代码。不幸的是，我不知道如何从我的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"); 

打印在data属性以禁用日期您From Date场使用json_encode

<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 

现在你可以使用disablethese变量在beforeShowDate

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