Feature

Disabled Time

Restrict time selection by disabling specific hours, minutes, or intervals

How does disabling times work in timepicker-ui?

Add a clock.disabledTime config to block specific hours, minutes or intervals. Blocked values are dimmed, cannot be selected, and are skipped during keyboard navigation.

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)
Set minute intervals (e.g., 5, 10, 15 minute increments)
Visual indicators show disabled times

How do I disable specific hours?

Pass an array of hours to clock.disabledTime.hours. For example, clock: { disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] } } leaves only 9 to 23 selectable.

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

Business Hours (9 AM - 5 PM)

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    disabledTime: {
4      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8]
5    }
6  }
7});
8
9picker.create();

Only hours 9-17 (9 AM to 5 PM) will be selectable.

Night Time Only

index.tstypescript

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.

How do I limit which minutes can be selected?

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

index.tstypescript

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

index.tstypescript

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

index.tstypescript

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

Combined Restrictions

Combine hour and minute restrictions for precise control:

Business Hours with Intervals

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    disabledTime: {
4      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23],
5      interval: '12:00 PM - 1:00 PM'
6    }
7  }
8});
9
10picker.create();
11
12// Result: 9:00-17:59 is selectable, with the 12:00-1:00 PM lunch break disabled

Custom Minutes per Hour

index.tstypescript

1const picker = new TimepickerUI(input, {
2  clock: {
3    disabledTime: {
4      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 20, 21, 22, 23],
5      minutes: [5, 10, 20, 25, 35, 40, 50, 55]
6    }
7  }
8});
9
10// Only allows minutes: 0, 15, 30, 45 during hours 9-19

Dynamic Restrictions

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

index.tstypescript

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

Visual Styling

Disabled times are automatically styled to be visually distinct:

Default Disabled Styling

index.csscss

1.timepicker-ui-clock-face__clock-hand[disabled],
2.timepicker-ui-minutes__minute[disabled],
3.timepicker-ui-hour__hour[disabled] {
4  opacity: 0.3;
5  cursor: not-allowed;
6  pointer-events: none;
7}
8
9.timepicker-ui-minutes__minute[disabled]:hover,
10.timepicker-ui-hour__hour[disabled]:hover {
11  background-color: transparent;
12}

Custom Disabled Colors

index.csscss

1.timepicker-ui-minutes__minute[disabled],
2.timepicker-ui-hour__hour[disabled] {
3  opacity: 0.2;
4  text-decoration: line-through;
5  color: #ef4444;  /* Red to indicate disabled */
6}

Validation Best Practices

When using disabled time, make sure to also implement server-side validation. Client-side restrictions can be bypassed, so always validate the submitted time values on your backend to ensure they meet your business rules.

Learn about validation