Laravel-9 jQuery Timepicker Disable 具体时间如何？

Question

$(document).ready(function(){
    $('#time').timepicker({
    timeFormat: 'h:mm a',
    interval: 60,
    minTime: '9',
    maxTime: '4:00pm',
    defaultTime: '9',
    startTime: '9:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true,
    });
});

如何从这个 jQuery timepicker 的选择中禁用/删除 12pm？

9:00 上午 10:00 AM 11:00 AM 1:00 PM 下午 2:00 3:00 PM 下午 4:00

Answer 1

您使用的时间选择器库不支持禁用时间。

试试这个

$(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm a',
        ...
        beforeShow: function(input, inst) {
            setTimeout(function() {
                inst.dpDiv.find('.ui_tpicker_time:contains("12:00 PM")').addClass('ui-disabled');
            }, 0);
        }
    });
});

在 CSS 中

.ui-disabled {
    pointer-events: none;
    opacity: 0.5;
}

Answer 2

要从这个时间选择器的选择中禁用/删除 12pm，您可以使用

disableTimeRanges

的

timepicker

选项。这是一个示例代码片段：

$(document).ready(function(){
    $('#time').timepicker({
        timeFormat: 'h:mm a',
        interval: 60,
        minTime: '9',
        maxTime: '4:00pm',
        defaultTime: '9',
        startTime: '9:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true,
        disableTimeRanges: [
            ['12:00pm', '12:01pm']
        ]
    });
});

在

disableTimeRanges

选项中，您可以指定一组应禁用的时间范围。每个时间范围都是一个包含两个元素的数组：范围的开始时间和结束时间。在本例中，我们禁用了从 12:00pm 到 12:01pm 的范围，这实际上从选择中删除了 12pm。

Answer 3

您可以尝试使用

disableTimeRanges

选项在 jQuery Timepicker 中禁用12pm 到 12:59pm 的范围

$(document).ready(function(){
  $('#time').timepicker({
    timeFormat: 'h:mm a',
    interval: 60,
    minTime: '9',
    maxTime: '4:00pm',
    defaultTime: '9',
    startTime: '9:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true,
    disableTimeRanges: [['12:00pm', '12:59pm']]
  });
});