How to invert range in timepicker?

Question

I started use this https://timepicker.co/ for my small booking project for hotels. but for hotels who open in evening and close on morning I need inverted time range like this :

hotels work from 20 to 08 we don't want to display past hours

so we need display hours like this :

start -> 20,21,22,23,00,01,02,03,04,05,06,07 end -> 21,22,23,00,01,02,03,04,05,06,07,08

now my picker looks like this and work good if range not inverted

    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

This appears to be a existing issue in wvega/timepicker according to this issue timepicker breaks if range crosses meridiem from PM to AM #94

An alternative that seems to meet your criteria is jquery.timepicker

Here's an example of hours spanning overnight, which you should be able to adapt to your additional date logic

$('.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/[email protected]/jquery.timepicker.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/jquery.timepicker.css">

<input class="timepicker" >

Demo