DatePicker php json无法运行

时间:2016-02-28 16:44:42

标签: javascript php jquery json datepicker

我正在尝试从数据库中收集存储的日期并将其保存到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;
&#13;
&#13;

的index.jsp

&#13;
&#13;
<%@ 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;
&#13;
&#13;

1 个答案:

答案 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];
    }
}

我更新了我的代码, 尝试使用错误处理