如何反转时间选择器中的范围？

Question

我开始将此 https://timepicker.co/ 用于我的小型酒店预订项目。但是对于晚上开门早上关门的酒店，我需要这样倒置的时间范围：

酒店从 20 点工作到 08 点我们不想显示过去的时间

所以我们需要这样显示时间：

开始 -> 20,21,22,23,00,01,02,03,04,05,06,07 结束 -> 21,22,23,00,01,02,03,04,05,06,07,08

现在我的选择器看起来像这样，如果范围没有反转就可以正常工作

    var initHour = new Date().getHours();
    if (20 > new Date().getHours()) {
        initHour = 20;
    }
    var intiMinutes = 0;
    
    var minDateTime = new Date(new Date().setHours(20,0, 0, 0));
    var maxDateTime = new Date(new Date().setHours(8, 0, 0, 0));

    if (minDateTime < new Date()) {
        minDateTime = new Date(new Date().setHours(initHour, intiMinutes, 0));
    }
    
      $('#TimePickerStart').timepicker({
            timeFormat: 'HH:mm',
            dynamic: false,
            minTime: minDateTime,
            maxTime: maxDateTime,
            startTime: new Date(new Date().setHours(initHour, intiMinutes, 0)),
            startHour: initHour,
            startMinutes: intiMinutes,
            interval: 30
        });
        $('#TimePickerStart').timepicker('setTime', new Date(new Date().setHours(initHour, intiMinutes, 0, 0)));

        if (intiMinutes >= 30) {
            initHour = initHour + 1;
            intiMinutes = 0;
        }
        else {
            intiMinutes = 30;
        }

        $('#TimePickerEnd').timepicker({
            timeFormat: 'HH:mm',
            dynamic: false,
            minTime: new Date(new Date().setHours(20, 0, 0, 0)),
            maxTime: maxDateTime,
            startTime: new Date(0, 0, 0),
            startHour: initHour,
            startMinutes: intiMinutes,
            interval: 30
        });
        $('#TimePickerEnd').timepicker('setTime', new Date(new Date().setHours(initHour, intiMinutes, 0, 0)));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">


<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>


<input id="TimePickerStart" style="background-color:white!important" class="form-control" onchange="OnStartHourClick(this)" pattern="[0-9]{2}:[0-9]{2}" required readonly>


<input id="TimePickerEnd" style="background-color:white!important" class="form-control"  onchange="OnEndHourClick(this)" pattern="[0-9]{2}:[0-9]{2}" required readonly>

Answer 1

这似乎是 wvega/timepicker according to this issue timepicker breaks if range crosses meridiem from PM to AM #94

中存在的问题

似乎符合您标准的替代方案是 jquery.timepicker

这是一个跨越一夜的时间示例，您应该能够适应您的附加日期逻辑

$('.timepicker').timepicker({
  minTime: '8:00pm',
  maxTime: '6:00am',
  timeFormat: 'H:i'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/timepicker@1.13.18/jquery.timepicker.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker@1.13.18/jquery.timepicker.css">

<input class="timepicker" >

演示

如何反转时间选择器中的范围？

How to invert range in timepicker?

html

javascript

jquery

timepicker