从数据库表提取时间到数组以禁用指定Timepicker时间选择

我有一个tbl_bookings数据库表，想要提取其中的fld_booking_pickuptime、fld_booking_start、fld_booking_end字段的时间数据存入数组，用来禁用Timepicker中已经被选中的时间。下面是我写的前端时间选择器代码和有问题的PHP+JS脚本，求指导修正实现功能：

前端代码 #

<div class="form-group">
  <label for="Pickup">Pickup Time</label>
  <input type="time" class="form-control timepicker" name="fld_booking_pickuptime" id="fld_booking_pickuptime" placeholder="hh:mm A" value="" required>
</div>

<div class="form-group">
  <label for="StartTime">Program Time (Start)</label>
  <input type="time" class="form-control timepicker" name="fld_booking_start" id="fld_booking_start" placeholder="hh:mm A" value="" required>
</div>

<div class="form-group">
  <label for="EndTime">Program Time (End)</label>
  <input type="time" class="form-control timepicker" name="fld_booking_end" id="fld_booking_end" placeholder="hh:mm A" value="" required>
</div>

原问题脚本 #

<?php
$times = array();
        
$time_query = "SELECT `tbl_bookings`.`fld_booking_pickuptime`, `tbl_bookings`.`fld_booking_start`, `tbl_bookings`.`fld_booking_end` FROM `tbl_bookings` WHERE status_delete=1";
$time_result = mysqli_query($link, $time_query);
  if (mysqli_num_rows($time_result ) > 0) {
    while ($row = mysqli_fetch_assoc($time_result )) {
       $times [] = $row['fld_booking_pickuptime'], $row['fld_booking_pickuptime'], $row['fld_booking_pickuptime'];
    }
  }
?>

  var array = <?= json_encode($times)?>;

$('input.timepicker').timepicker({
    beforeShowDay: function(time){
        var string = jQuery.timepicker.formatTime('hh:mm A', date);
        return [ array.indexOf(string) == -1 ]
    }
});

问题分析 #

你的脚本存在几个关键问题：

• PHP数组赋值错误：语法错误，且重复添加同一个字段，没有正确收集三个时间字段
• JS方法误用：beforeShowDay是日期选择器的方法，Timepicker应该用beforeShowTime来处理时间禁用
• 变量未定义：JS中使用了未声明的date变量，应该用传入的time参数
• 时间格式不匹配：数据库时间格式和Timepicker输出格式可能不一致，导致匹配失败

修正后的完整代码 #

PHP部分 #

<?php
$times = array();
        
// 简化SQL语句，表名已指定可省略前缀
$time_query = "SELECT `fld_booking_pickuptime`, `fld_booking_start`, `fld_booking_end` FROM `tbl_bookings` WHERE status_delete=1";
$time_result = mysqli_query($link, $time_query);

if (mysqli_num_rows($time_result) > 0) {
    while ($row = mysqli_fetch_assoc($time_result)) {
        // 遍历三个时间字段，转换格式后加入数组，过滤空值
        foreach (['fld_booking_pickuptime', 'fld_booking_start', 'fld_booking_end'] as $field) {
            if (!empty($row[$field])) {
                // 转换为12小时制带AM/PM的格式，和Timepicker保持一致
                $times[] = date('h:i A', strtotime($row[$field]));
            }
        }
    }
}
// 去重，避免重复禁用同一时间
$times = array_unique($times);
?>

JS部分 #

<script>
// 语义化变量名
var disabledTimes = <?= json_encode($times) ?>;

$('input.timepicker').timepicker({
    // 配置时间格式，和PHP输出一致
    timeFormat: 'hh:mm A',
    // Timepicker专用的时间过滤方法
    beforeShowTime: function(time) {
        // 格式化当前时间为匹配字符串
        var formattedTime = jQuery.timepicker.formatTime('hh:mm A', time);
        // 返回true允许选择，false禁用
        return disabledTimes.indexOf(formattedTime) === -1;
    }
});
</script>

关键修改说明 #

1. PHP端：

   • 用循环遍历三个时间字段，简化代码逻辑
   • 统一时间格式为hh:mm A，确保和前端Timepicker格式匹配
   • 过滤空时间值，避免无效数据
   • 数组去重，防止重复禁用同一时间

2. JS端：

   • 替换为Timepicker专用的beforeShowTime方法
   • 修正变量引用，使用传入的time参数
   • 配置timeFormat确保格式统一
   • 语义化变量名提升代码可读性

内容的提问来源于stack exchange，提问作者NAFIS