jQuery Timepicker配置问题：仅显示指定时间及高亮不可用时段

问题拆解 #

你的核心需求是仅显示指定时间列表（10:00am-12:00am范围内），同时高亮不可用时段，且disableTimeRanges配置未生效。当前代码存在两个关键问题：

1. 误用了Datepicker的beforeShowDay方法，Timepicker对应的控制方法是beforeShowTime
2. disableTimeRanges未生效大概率是时间格式不匹配或配置逻辑冲突

修正后的完整代码 #

// 定义你需要显示的预设时间列表
var allowedTimes = ["5:00 PM", "6:00 PM"];

$('#timepicker').timepicker({
    timeFormat: 'h:mm p',
    interval: 60,
    minTime: '10:00am',
    maxTime: '12:00am',
    startTime: '10:00am', // 修正格式，与timeFormat统一
    dynamic: false,
    dropdown: true,
    scrollbar: true,
    // 仅显示预设时间
    beforeShowTime: function(time) {
        var formattedTime = jQuery.timepicker.formatTime('h:mm p', time);
        // 返回true则显示该时间，false则隐藏
        return $.inArray(formattedTime, allowedTimes) !== -1;
    },
    // 禁用非预设时段（可选，配合高亮需求）
    disableTimeRanges: [
        ['10:00am', '4:59pm'],
        ['6:01pm', '12:00am']
    ],
    // 给禁用时段添加高亮样式
    beforeShow: function() {
        setTimeout(() => {
            $('.ui-timepicker-disabled').addClass('highlighted-unavailable');
        }, 10);
    }
});

关键调整说明 #

• 替换beforeShowDay为beforeShowTime：这是Timepicker控制单个时间项是否显示的专属方法，返回布尔值直接决定该时间是否被渲染。
• 精准配置disableTimeRanges：确保时间段格式与timeFormat完全匹配，避免和beforeShowTime的过滤逻辑冲突。如果仅需显示预设时间，beforeShowTime已经足够，disableTimeRanges可作为补充实现高亮效果。
• 高亮样式实现：添加自定义CSS类标记禁用时段：

.highlighted-unavailable {
    background-color: #f8d7da;
    color: #721c24;
    cursor: not-allowed;
}

排查disableTimeRanges失效原因 #

1. 确认使用的是支持该配置的Timepicker版本（如trentrichardson的jQuery Timepicker Addon）。
2. 检查时间格式是否与timeFormat完全一致，比如'10:00am'不能写成'10:00 AM'。
3. 避免时间段重叠或逻辑冲突，比如如果beforeShowTime已经隐藏了大部分时间，disableTimeRanges可能没有生效空间。

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