我正在尝试从数据库中收集存储的日期并将其保存到json中。然后我想将datepicker中的日期用作不可用日期。这就是我所提出的日期选择器根本没有显示出来的。
checkDates.php
<?php
$servername = "localhost";
$username = "user";
$password = "user";
$dbname = "eBooking";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "select bookedDate from appointment_booked";
$result = $conn->query($sql);
$checkDates = array();
while($row = $result->fetch_assoc()) {
$checkDate['dates'] = $row['bookedDate'];
$checkDates[] = $checkDate;
}
echo json_encode($checkDates);
$conn->close();
?>
&#13;
的index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: checkAvailability
});
})
$.getJSON('checkDates.php?dld='+ id, function(json){dates=json;});
function checkAvailability(mydate){
var myObject = dates;
for( var x in myObject) {
$myBadDates = new Array(myObject[x]['dates']);
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}
}
</script>
</head>
<body>
<tr id="tr1">
<td>Select appointment date: </td>
<td><input type="text" id="datepicker" value="" /></td>
</tr>
</body>
</html>
&#13;
答案 0 :(得分:0)
getJson是异步的,所以你必须等到它完成:
var dates;
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "checkDates.php",
data: { dld: 3 },
success: function (json) {
alert("success, look at the console");
console.log(json);
dates = json;
$("#datepicker").datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: checkAvailability
});
},
error: function (request, status, error) {
alert(request.responseText);
console.log(request);
}
});
function checkAvailability(mydate) {
var myObject = dates;
for (var x in myObject) {
$myBadDates = new Array(myObject[x]['dates']);
var $return = true;
var $returnclass = "available";
$checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
for (var i = 0; i < $myBadDates.length; i++) {
if ($myBadDates[i] == $checkdate) {
$return = false;
$returnclass = "unavailable";
}
}
return [$return, $returnclass];
}
}
我更新了我的代码, 尝试使用错误处理