I have been battling with this jquery mobile datepicker for 2 days now!!
这是我的代码，我正在检索 bool 值设置为 1 的日期(禁用日期)，我无法让日期选择器禁用它们!请帮忙.. 我正在尝试从我的 mysql 查询将带有 json 的数组返回到日期选择器
booked_dates.php 内容:
<?php
require_once("connect.php");
mysql_select_db("eyecandysf");
$booked_date = mysql_query("SELECT date, FROM date_time WHERE booking_status !=0 ");
while ($result = mysql_fetch_array($booked_date)){
$dates[] = $result['date'];
}
echo json_encode($dates);
?>
main.php内容:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<link rel="stylesheet" href="http://mobile-bydesign.com/mmc/mobile/3.0.4/themes/eyecandysf22.css" />
<link href="http://mobile-bydesign.com/mmc/mobile/3.0.4/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="datepicker_mobile.js"></script>
<script type="text/javascript">
$.getJSON('booked_dates.php', function(data) {
var bookedDays = data;
});
function isAvailable(date){
var dateAsString = date.getFullYear().toString() + "-" + (date.getMonth()+1).toString() + "-" + date.getDate();
var result = $.inArray( dateAsString, bookedDays ) ==-1 ? [true] : [false];
return result
}
$('#date').datepicker({minDate: 0, maxDate: "+2M", beforeShowDay: isAvailable});
</script>
<style>
.ui-select .ui-btn select{
font-size: 50px;
}
</style>
</head>
<body>
<form data-ajax="false" id="date" action="time.php" method="post">
<div id="dateDiv" data-role="fieldcontain">
<label for="mydate" class="ui-hidden-accessible">date </label>
<input name="date" type="date" id="date" data-theme="b" data-role="datebox" value="" placeholder="date"
data-options='{"mode": "calbox", "afterToday": true,"blackDays": [1], "maxDays": 65}'/>
</div>
<input type="submit" value="select time" name="submit" />
</form>
</body>
</html>
最佳答案
您的代码的问题是 bookedDays 变量仅在 ajax 回调中定义(它是一个局部变量)。
它甚至在全局范围内完全未定义。
所以:
var bookedDays = [];
$(document).ready(function(){
$.getJSON('booked_dates.php', function(data) {
bookedDays = data;
});
});
这将确保您正在使用全局变量，并防止在 ajax 调用完成之前访问它时出错。
编辑:
此外，为了避免日期格式问题，请在 javascript 端使用 ISO 日期:
var dateAsString = date.toISOString().substring(0,10);
关于php - 使用 mysql 禁用日期选择器中的日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11477561/