0 
I have been battling with this jquery mobile datepicker for 2 days now!!

これが私のコードです。ブール値が1に設定された日付を取得しています（無効な日）、datepickerでそれらを無効にすることはできません!! 助けてください..jsonを含む配列をmysqlクエリからdatepickerに返そうとしています

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>
4

1 に答える 1

1

コードの問題は、bookedDays変数が ajax コールバック内でのみ定義されていることです (これはローカル変数です)。また、グローバルスコープでも完全に未定義です。

そう：

var bookedDays = [];

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

これにより、グローバル変数を操作していることを確認し、ajax 呼び出しが終了する前にエラーが発生するのを防ぐことができます。

編集:さらに、日付の書式設定に関する問題を回避するために、ISOjavascript 側でも日付を使用します。

var dateAsString = date.toISOString().substring(0,10);
于 2012-07-13T20:21:00.653 に答える