使用 mysql 在 datepicker 中禁用天数

Posted

技术标签:

【中文标题】使用 mysql 在 datepicker 中禁用天数【英文标题】:disable days in datepicker with mysql 【发布时间】:2012-07-13 17:19:29 【问题描述】:
I have been battling with this jquery mobile datepicker for 2 days now!! 

这是我的代码,我正在检索布尔值设置为 1 的日期(禁用天数),我无法让 datepicker 禁用它们!请帮忙.. 我正在尝试从我的 mysql 查询中将一个带有 json 的数组返回给 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>

【问题讨论】:

编辑为将booked_dates.php和主文件的代码分开(不知道它在现实中是如何调用的,所以为了举例,我称之为main.php) 【参考方案1】:

您的代码的问题是 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);

【讨论】:

谢谢!虽然这还没有解决它..:( 现实中发生了什么?错误?或者它根本不禁用日期? 没有错误,它只是没有禁用日期......在我的测试数据库中,我将 07/14 设置为 1,因此它应该被禁用......但没有任何反应...... aha... 我认为这里还有另一个问题 - 当您从 javascript Date 对象请求日/月时,您会得到一个整数,没有前导零 -但是来自 mysql 的日期采用ISO 格式,其中包括前导零。所以,如果你得到的整数小于 10,你应该自己加 '0' 来比较工作 是的,我已经想到了,我尝试在 SELECT 之后更改 mysql 日期格式,但它也不起作用.....我似乎已经尝试了一切!!

以上是关于使用 mysql 在 datepicker 中禁用天数的主要内容,如果未能解决你的问题,请参考以下文章

在 jQuery datepicker 中分配从 mysql 获取的日期

动态禁用 jQuery Datepicker 图标

如何在 php datepicker 中禁用过去的日期 [重复]

jQuery UI Datepicker - 在 min/maxdate 中排除禁用日期

禁用jQuery UI datepicker的焦点设置

如何在 swift 中为一个文本字段禁用 DatePicker 交互(用于选择日期)“