在 jQuery Ui Timepicker 中设置允许时间

Question

I'm using Timepicker to jQuery UI Datepicker https://trentrichardson.com/examples/timepicker/

jQuery('#element').datetimepicker({
        dateFormat: "dd/mm/yy",
        timeFormat: "H:m",
        onSelect: function (selectedDateTime){

        },
        beforeShowDay: function(date) {

        }
    });

Now I want allow only 08:00 and 10:00 in timepicker, how can I do it?

Thanks

Answer 1

According to provided documentation you have to use 2 properties minTIme and maxTime . Smth like this:

<input type='text' class='timepicker' />

$('.timepicker').timepicker({
    timeFormat: 'h:mm p',
    interval: 60,
    minTime: '08:00',
    maxTime: '10:00',
    defaultTime: '9',
    startTime: '80:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
});

===EDIT===

In this case I'd suggest you to create change handler for this timepicker and set it's value to default if wrong time was entered.

$('.timepicker').timepicker({
  timeFormat: 'h:mm p',
  interval: 60,
  minTime: '08:00',
  maxTime: '10:00',
  defaultTime: '9',
  startTime: '80:00',
  change: function(time) {
    debugger;
    if (time.getMinutes() !== 0) {
        alert('Wrong value');
            $('.timepicker').val('08:00');
    }
  }
});

Answer 2

Just use options: showmMinute: false and stepHour: 2

https://trentrichardson.com/examples/timepicker/

See code below:

$('.timepicker').timepicker({
  timeFormat: 'h:mm p',
  interval: 60,
  minTime: '08:00',
  maxTime: '10:00',
  startTime: '8:00',
  showMinute: false,
  stepHour: 2
});

Added JSfiddle: https://jsfiddle.net/wvt2bnok/

Answer 3

I used this library and it working fine with allowTimes option. https://xdsoft.net/jqplugins/datetimepicker/