【发布时间】：2017-12-09 18:33:28
【问题描述】：
我有一个日期选择器输入和一个时间选择器输入，我想用它们来安排一个人的约会。
当用户单击输入以打开日期选择器菜单时，我想将特定日期时间变灰。我有一个 php 函数，它以 'Y-m-d H:i:s' 字符串格式返回这个日期时间数组。但我不知道如何使用该函数的返回值来为 javascript 函数提供在 datepicker 中禁用一系列日期所需的内容。
在我的日期选择器的 onSelect 事件中，我希望它根据当天预订的时间段启用/禁用我的时间选择器中的时间选项。但我不知道怎么做。
Datepicker 使用 beforeshowDay: 禁用预订日期
用户从日期选择器中选择日期
日期选择器在时间选择器中启用/禁用时间
我确实发现了如何在时间选择器 Here 中禁用时间范围。代码示例是这样的：
$('input.timepicker').timepicker({
'disableTimeRanges': [
['1am', '2am'],
['3am', '4:01am']
]
});
但这就是我在时间选择器范围内禁用时间范围的方式。我不知道如何在 datepicker 的 BeforeShowDay 中禁用它们？
<script type="text/javascript">
$(document).ready(function(){
$( "#datepickerListAppointments" ).datepicker(
{
minDate:'0',
beforeShowDay:
function(dt)
{ // need to disable days other than tuesday and wednesday too.
return [dt.getDay() === 2 || dt.getDay() === 3, ""];
},
onSelect : function(){
should disable/enable timepicker times from here?
}
});
$('input.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 90,
minTime: '9',
maxTime: '10:30am',
defaultTime: '9',
startTime: '9:00',
dynamic: false,
dropdown: true,
scrollbar: false
});
});
这是提供日期时间的函数，以防有助于了解。
function get_next_open_appointments($numAppointments, $timeSlotToExclude = "")
{
global $db;
$whereCondition = "WHERE FirstName = :null ";
if ($timeSlotToExclude != "")
{
$whereCondition .= "AND AppointmentTime != '$timeSlotToExclude' ";
}
$query = "SELECT DISTINCT AppointmentTime FROM appointments
$whereCondition
ORDER BY AppointmentTime ASC LIMIT $numAppointments";
$statement = $db->prepare($query);
$statement->bindValue(':null', "");
$statement->execute();
$datesArray = array();
while ($row = $statement->fetch())
{
array_push($datesArray, $row['AppointmentTime']);
}
$statement->closeCursor();
return $datesArray;
}
更新：
Hugo De Carmo 为我指明了正确的方向，我得到了适当禁用/启用的日期。但是，我不知道如何使用我在下面的代码中提取的日期时间来禁用/启用时间选择器中的时间。
这是新代码：
<script type="text/javascript">
$(document).ready(function(){
// uses php to get open appointments, and put them in a javascript array
<?php $datetime_openings = get_next_open_appointments(200);
$date_openings = array();
foreach ($datetime_openings as $dt)
{
array_push($date_openings, substr($dt,0,10)); // just the date part
}
$json_date_openings = json_encode($date_openings);
echo "var arr_Openings = ". $json_date_openings . ";\n";
?>
$( "#datepickerOpenAppointments" ).datepicker(
{
minDate:'0',
beforeShowDay:
function(dt)
{
var string = jQuery.datepicker.formatDate('yy-mm-dd', dt);
var bFound = (arr_Openings.indexOf(string) != -1);
return [ bFound ];
},
onSelect : function(){
// Should disable/enable time ranges here?
});
$('input.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 90,
minTime: '9',
maxTime: '10:30am',
defaultTime: '9',
startTime: '9:00',
dynamic: false,
dropdown: true,
scrollbar: false
});
});
【问题讨论】：
标签： javascript php jquery datepicker timepicker