Min / Max Time

Use minTime and maxTime to restrict the range of values the picker will accept. Times outside the range are rejected with vtp:invalid, and the hour/minute/second grids grey out the cells that are out of reach.

Boundaries are normally written in 24-hour notation ('08:00', '17:00:00') regardless of the format option, but '8am' / '05:00 PM' are understood too.

Basic working hours

new Timepicker('#shift', {
  minTime: '08:00',
  maxTime: '17:00',
  onInvalid: (err) => {
    if (err.code === 'BELOW_MIN') showError('Too early — pick 08:00 or later')
    if (err.code === 'ABOVE_MAX') showError('Too late — pick 17:00 or earlier')
  },
})

Values on the boundary (08:00 and 17:00) are accepted.

With seconds format

When your format includes seconds, express minTime and maxTime in HH:mm:ss:

new Timepicker('#precise', {
  format: 'HH:mm:ss',
  minTime: '08:00:00',
  maxTime: '17:00:00',
})

Dynamic range — start + end picker pair

Keep the end time always after the start time. Update minTime dynamically via setOptions:

const tpStart = new Timepicker('#start', {
  format: 'HH:mm',
  onChange: (value) => {
    tpEnd.setOptions({ minTime: value })
    if (tpEnd.getValue() && tpEnd.getValue() <= value) {
      tpEnd.clear()
    }
  },
})

const tpEnd = new Timepicker('#end', {
  format: 'HH:mm',
})

setOptions re-renders an open dropdown, so the new minTime greys out the newly forbidden cells right away — no need to close and reopen the end picker.

If the end picker already holds a value that the new minTime forbids, vtp:invalid fires with BELOW_MIN and the input gets the vtp-invalid class, but the value is kept. The explicit clear() above is what actually drops it — remove that line if you'd rather flag the conflict than erase the user's input.

Partially allowed hours stay clickable. With minTime: '09:30', hour 09 is still selectable — only the minutes below 30 are disabled once you drill into it.

Error codes for range violations

Code	Meaning
'BELOW_MIN'	Value is before minTime.
'ABOVE_MAX'	Value is after maxTime.

new Timepicker('#tp', {
  minTime: '09:00',
  maxTime: '20:00',
  onInvalid: (err) => {
    switch (err.code) {
      case 'BELOW_MIN':
        flash(`Minimum is 09:00, got ${err.value}`)
        break
      case 'ABOVE_MAX':
        flash(`Maximum is 20:00, got ${err.value}`)
        break
    }
  },
})

Pre-filling a value that respects the range

const tp = new Timepicker('#tp', {
  minTime: '09:00',
  maxTime: '17:00',
})

// If you programmatically set a value outside the range,
// vtp:invalid fires and the input is NOT updated.
await tp.setValue('06:00')    // rejected — BELOW_MIN, input stays empty
await tp.setValue('12:00')    // accepted