Example · Basic
12h Format
Examples using 12-hour clock format with AM/PM
Default 12h Format
The 12h format is enabled by default:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: { type: '12h' } // This is the default3});4picker.create();
Custom AM/PM Labels
Customize AM and PM labels for different languages or preferences:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: { type: '12h' },3 labels: {4 am: 'AM',5 pm: 'PM'6 }7});8picker.create();
With Current Time
Initialize with current time in 12h format:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 type: '12h',4 currentTime: {5 updateInput: true,6 time: new Date(),7 locales: 'en-US'8 }9 }10});11picker.create();
Disabled Hours (12h)
Disable specific hours in 12h format:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 type: '12h',4 disabledTime: {5 hours: [1, 2, 3, 11, 12]6 }7 }8});9picker.create();
Time Range Restriction
Disable time ranges in 12h format:
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();
Auto-switch to Minutes
Automatically switch to minutes after selecting hour:
index.tstypescript
1const picker = new TimepickerUI(input, {2 clock: {3 type: '12h',4 autoSwitchToMinutes: true5 }6});7picker.create();