Disabled Time

Add a clock.disabledTime config to block specific hours, minutes, seconds or time ranges. Blocked values are dimmed and cannot be picked on the clock face or the wheel. Arrow keys skip them, and OK stays disabled while the shown time is blocked.

The disabled time feature allows you to prevent users from selecting certain time values. This is useful for business hours restrictions, appointment scheduling, or any scenario where only specific times should be selectable.

• Disable specific hours (e.g., after business hours)
• Disable specific minutes (e.g., only allow :00, :15, :30, :45)
• Disable specific seconds with clock.disabledTime.seconds when clock.showSeconds is on
• Set minute steps (e.g., 5, 10, 15 minute increments)
• Visual indicators show disabled times

Pass an array of hours to clock.disabledTime.hours. With clock: { type: '24h', disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] } }, only hours 9 to 23 can be selected. In 12-hour mode, the default, the list takes values 1 to 12 and blocks each listed hour in both AM and PM.

Restrict which hours can be selected by providing an array of hour values:

Business Hours (9 AM - 5 PM)

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: {
5      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23]
6    }
7  }
8});
9
10picker.create();

Only hours 9 to 17 can be selected. In 12-hour mode hours takes values 1 to 12 and blocks that hour in both AM and PM, so use clock.type: '24h' to block by time of day.

Night Time Only

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: {
5      hours: [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
6    }
7  }
8});
9
10picker.create();

Only allows selection from 10 PM to 5 AM.

List the minutes to block in clock.disabledTime.minutes, or set clock.incrementMinutes to a step like 15 so only 0, 15, 30 and 45 are offered.

Control which minute values are available:

Quarter Hour Intervals

1const picker = new TimepickerUI(input, {
2  clock: {
3    disabledTime: {
4      minutes: Array.from({ length: 60 }, (_, i) => i)
5        .filter(m => ![0, 15, 30, 45].includes(m))
6    }
7  }
8});
9
10picker.create();

Only :00, :15, :30, and :45 minutes will be selectable.

Using Minute Increments

1const picker = new TimepickerUI(input, {
2  clock: {
3    incrementMinutes: 15  // Only show minutes in 15-minute steps
4  }
5});
6
7picker.create();

clock.incrementMinutes limits selection to 15-minute steps (0, 15, 30, 45).

5-Minute Intervals

1const picker = new TimepickerUI(input, {
2  clock: {
3    incrementMinutes: 5  // Show minutes in 5-minute steps
4  }
5});
6
7picker.create();

Minutes: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55

Combine hour and minute restrictions for precise control:

Business Hours with Ranges

When ranges is set, the hours, minutes and seconds lists are ignored, so express the whole rule as ranges.

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: {
5      ranges: ['00:00 - 08:59', '12:00 - 12:59', '18:00 - 23:59']
6    }
7  }
8});
9
10picker.create();
11
12// Result: 09:00-11:59 and 13:00-17:59 can be selected

Range edges are inclusive, and an edge without seconds covers its whole minute, so '12:00 - 12:59' blocks 12:00:00 to 12:59:59. Ranges must not overlap.

Hours and Minutes Together

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: {
5      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 20, 21, 22, 23],
6      minutes: Array.from({ length: 60 }, (_, i) => i)
7        .filter(m => ![0, 15, 30, 45].includes(m))
8    }
9  }
10});
11
12picker.create();
13
14// Hours 9-19, minutes :00, :15, :30 and :45

The minutes list applies to every hour. To block different minutes in different hours, use ranges.

Change disabled times dynamically based on user actions or external data:

1const input = document.querySelector('#timepicker');
2const picker = new TimepickerUI(input, {
3  clock: { type: '24h' }
4});
5
6// Initial creation with no restrictions
7picker.create();
8
9// Update to add restrictions (e.g., after selecting a date)
10function updateTimeRestrictions(selectedDate) {
11  const isWeekend = [0, 6].includes(selectedDate.getDay());
12
13  const restrictions = isWeekend
14    ? { hours: [] }  // No restrictions on weekends
15    : { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23] };  // Business hours
16
17  picker.setOptions({
18    clock: {
19      disabledTime: restrictions
20    }
21  });
22}
23
24// Listen for date changes
25dateInput.addEventListener('change', (e) => {
26  updateTimeRestrictions(new Date(e.target.value));
27});

When the rule does not fit lists or ranges, pass clock.isTimeDisabled. It gets a TimeOfDay, { hour, minutes, seconds }, and returns true to disable that time. hour is 0 to 23 in both clock types, and seconds is 0 unless clock.showSeconds is on.

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    isTimeDisabled: ({ hour }) => hour < 9 || hour >= 17
5  }
6});
7
8picker.create();

• The function is combined with clock.disabledTime as a union. A time is disabled when either one disables it.
• An hour or a minute is disabled when every time inside it is disabled.
• It applies to the clock face, the wheel, arrow-key skipping, typed input and the OK button. The compact-wheel mode never blocks OK, a known limitation.
• If the function throws, that time counts as enabled and the error is rethrown asynchronously.

Refresh after the data changes

Results are cached. When the data behind the function changes, call refreshDisabledTime(). It clears the cache and updates the disabled marks and the OK button without a re-render. It does not write to the input. Calling it while the picker is closed is safe, because the next open uses fresh results.

1let lunchBreak = false;
2
3const picker = new TimepickerUI(input, {
4  clock: {
5    type: '24h',
6    isTimeDisabled: ({ hour }) => {
7      if (hour < 9 || hour >= 17) return true;
8      return lunchBreak && hour === 12;
9    }
10  }
11});
12
13picker.create();
14
15lunchBreak = true;
16picker.refreshDisabledTime();

See the live example.

createDisabledTimeCheck() builds a function that tells whether a time is disabled, with the same rules as a mounted picker. It reads type, disabledTime, isTimeDisabled and showSeconds from the clock options. It needs no picker and no DOM, so it also runs on the server, for example to validate a submitted time. New in 4.7.0.

1import { createDisabledTimeCheck } from 'timepicker-ui';
2
3const isDisabled = createDisabledTimeCheck({
4  type: '24h',
5  disabledTime: { ranges: ['12:00 - 13:00'] }
6});
7
8isDisabled('12:30');                              // true
9isDisabled({ hour: 9, minutes: 0, seconds: 0 });  // false

• The edges of ranges use the clock format of type.
• The check takes a time string in the setValue() format or a TimeOfDay with hour from 0 to 23. It returns true for text that is not a time.
• It throws when disabledTime is invalid, with the message a picker reports through error.
• Results of isTimeDisabled are cached. Build a new check after the data behind it changes.

Disabled values are dimmed and cannot be clicked. On the clock face the library adds tp-ui-tips-disabled to the number. In the wheel modes it adds is-disabled to the wheel item.

Default Disabled Styling

1/* Clock face numbers */
2.tp-ui-tips-disabled {
3  color: var(--tp-text-disabled);
4  pointer-events: none;
5}
6
7/* Wheel and compact-wheel items (wheel plugin) */
8.tp-ui-wheel-item.is-disabled {
9  opacity: var(--tp-wheel-disabled-opacity); /* 0.38 by default */
10  pointer-events: none;
11}

In forced-colors mode, disabled clock numbers use the system GrayText color.

Custom Disabled Colors

Change the tokens instead of overriding the rules. Add a class with ui: { cssClass: 'my-theme' }. The picker puts it on .tp-ui-wrapper when it opens.

1.tp-ui-wrapper.my-theme {
2  --tp-text-disabled: rgba(29, 27, 32, 0.38); /* clock numbers */
3  --tp-wheel-disabled-opacity: 0.3;           /* wheel items */
4}