2012-07-13 48 views
0
I have been battling with this jquery mobile datepicker for 2 days now!! 

這裏是我的代碼,我檢索日期與布爾值設置爲1,請幫助.. 我試圖用JSON從我的MySQL查詢返回數組的日期選擇器禁用datepicker與mysql

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> 
+0

編輯,以booked_dates.php的單獨的代碼和主文件(不知道它是怎麼叫在現實中,所以我稱它爲main.php爲例) – poncha 2012-07-13 20:08:20

回答

1

與您的代碼的問題是bookedDays變量只在ajax回調中定義(它是一個局部變量)。 甚至在全球範圍內完全未定義。

所以:

var bookedDays = []; 

$(document).ready(function(){ 
    $.getJSON('booked_dates.php', function(data) { 
    bookedDays = data; 
    }); 
}); 

這都將確保您有一個全局變量的工作,並阻止訪問它的Ajax調用完成之前的錯誤。

編輯: 此外,爲了避免與日期格式問題,使用ISO日期JavaScript的一面:

var dateAsString = date.toISOString().substring(0,10); 
+0

謝謝!雖然這還沒有解決它.. :( – 2012-07-13 20:31:41

+0

什麼發生在現實中?錯誤?或者它根本不禁用日期? – poncha 2012-07-13 20:37:04

+0

沒有錯誤,它只是不禁用日期...在我的測試數據庫中有07/14設置爲1,所以它應該被禁用...但沒有任何反應... – 2012-07-13 20:40:38