Example · Features
Disabled Time
Restrict specific hours, minutes, or time ranges
Disabled Hours
Disable specific hours from selection:
index.tstypescript
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:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 disabledTime: {4 minutes: [15, 30, 45]5 }6 }7});8picker.create();
Time Range Interval
Disable a time range (hours and minutes keys are ignored when interval is set):
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 type: '12h',4 disabledTime: {5 interval: '10:00 AM - 2:00 PM'6 }7 }8});9picker.create();
Multiple Time Ranges
Disable multiple time ranges:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 type: '12h',4 disabledTime: {5 interval: [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:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 type: '24h',4 disabledTime: {5 interval: '00:00 - 08:00'6 }7 }8});9picker.create();
Dynamic DisabledTime Update
Update disabled times dynamically using the update() method:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 type: '24h',4 disabledTime: { hours: [9, 10, 11, 12] }5 }6});7picker.create();89// Later, update disabled times10picker.update({11 options: {12 clock: {13 disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] }14 }15 },16 create: true17});
Dynamic Interval Update
Update disabled intervals dynamically for shift scheduling or business rules:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 type: '24h',4 disabledTime: { interval: '09:00 - 12:00' }5 }6});7picker.create();89// Update to different interval10picker.update({11 options: {12 clock: {13 disabledTime: { interval: '14:00 - 18:00' }14 }15 },16 create: true17});1819// Update to multiple intervals20picker.update({21 options: {22 clock: {23 disabledTime: {24 interval: ['00:00 - 08:00', '12:00 - 13:00', '18:00 - 23:59']25 }26 }27 },28 create: true29});3031// Switch from interval to hours32picker.update({33 options: {34 clock: {35 disabledTime: { hours: [20, 21, 22, 23] }36 }37 },38 create: true39});