Disabled Time

Restrict specific hours, minutes, or time ranges

Disabled Hours

Disable specific hours from selection:

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

Disabled Minutes

#

Disable specific minutes from selection:

1const picker = new TimepickerUI(input, {
2  clock: {
3    disabledTime: {
4      minutes: [15, 30, 45]
5    }
6  }
7});
8picker.create();

Time Range

#

Disable a time range with disabledTime.ranges (the hours, minutes and seconds lists are ignored when ranges is set):

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '12h',
4    disabledTime: {
5      ranges: '10:00 AM - 2:00 PM'
6    }
7  }
8});
9picker.create();

Multiple Time Ranges

#

Disable multiple time ranges:

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '12h',
4    disabledTime: {
5      ranges: [
6        '9:00 AM - 11:00 AM',
7        '1:00 PM - 3:00 PM',
8        '5:00 PM - 7:00 PM'
9      ]
10    }
11  }
12});
13picker.create();

24h Format with Range

#

Disable time range in 24h format:

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: {
5      ranges: '00:00 - 08:00'
6    }
7  }
8});
9picker.create();

Dynamic DisabledTime Update

#

Update disabled times at runtime with the setOptions() method:

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: { hours: [9, 10, 11, 12] }
5  }
6});
7picker.create();
8
9// Later, update disabled times
10picker.setOptions({
11  clock: {
12    disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] }
13  }
14});

Dynamic Range Update

#

Update disabled ranges at runtime for shift scheduling or business rules:

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '24h',
4    disabledTime: { ranges: '09:00 - 12:00' }
5  }
6});
7picker.create();
8
9// Update to a different range
10picker.setOptions({
11  clock: {
12    disabledTime: { ranges: '14:00 - 18:00' }
13  }
14});
15
16// Update to multiple ranges
17picker.setOptions({
18  clock: {
19    disabledTime: {
20      ranges: ['00:00 - 08:00', '12:00 - 13:00', '18:00 - 23:59']
21    }
22  }
23});
24
25// Switch from ranges to hours
26picker.setOptions({
27  clock: {
28    disabledTime: { hours: [20, 21, 22, 23] }
29  }
30});

Disable with a Function

#

clock.isTimeDisabled decides per time. This one allows 09:00 to 16:59 only. The button adds a lunch break at 12:00 and calls refreshDisabledTime(), so the picker re-reads the function without a re-render.

Lunch break: off

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  ui: { inline: { enabled: true, container: '#picker', autoUpdate: true } }
12});
13picker.create();
14
15toggleButton.addEventListener('click', () => {
16  lunchBreak = !lunchBreak;
17  picker.refreshDisabledTime();
18});