我想要实现的是阻止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'); ?>
这是我要放置BeforeShowDay函数的datepicker.js文件代码。不幸的是，我不知道如何将fromDate和toDate从我的SELECT查询中获取到我的日期选择器中以及它如何适合下面的代码。这真的令人沮丧，因为我确切地知道我想要做什么以及这些部分应该如何组合在一起，但我无法解决如何实现它。
来自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 );
}
});
});
答案 0 :(得分：1)
基本思想，没有测试，但应该有效。
<强> PHP
假设您在PHP中使用数组禁用日期
$disablethese = array("2014-01-03","2014-01-13","2014-01-23");
使用From Date
data属性中打印包含已停用日期的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 ]
}
});
答案 1 :(得分：0)
<?php
include'db.php';
$Pro_id = 4;
$dateslistselect1[]='';
$queryres = mysqli_query($conn, "SELECT start_date,end_date FROM table_name WHERE id='".$Pro_id."' AND YEAR(start_date) = YEAR(CURDATE()) OR YEAR(start_date) = YEAR(CURDATE()) + 1") or die(mysqli_error($conn));
while($row = mysqli_fetch_array($queryres))
{
$start = strtotime($row['start_date']);
$end = strtotime($row['end_date']);
for ($i1=$start; $i1<=$end; $i1+=86400) {
$dateslistselect1[]= '"'.date('d-m-Y',$i1).'"';
}
}
$dateslistselect1=array_filter($dateslistselect1);
$totaldayslist1 =implode(", ", $dateslistselect1);
?>
<script>
var disableddates = [<?php echo $totaldayslist1; ?>];
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
</script>
<script type="text/javascript">
(function( $ ) {
var disableddates = [];
$("#in").datepicker({
minDate: new Date(),
dateFormat: "mm-dd-yy",
beforeShowDay: DisableSpecificDates,
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#out").datepicker("option", "minDate", dt);
}
});
$("#out").datepicker({
minDate: new Date(),
dateFormat: "mm-dd-yy",
beforeShowDay: DisableSpecificDates,
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#out").datepicker("option", "maxDate", dt);
}
});
/* $( ".datepicker" ).datepicker( "option", "maxDate", dt );*/
})( jQuery );
</script>