12h Format

Name: timepicker-ui
Author: Piotr Glejzer

Examples using 12-hour clock format with AM/PM

Default 12h Format

The 12h format is enabled by default:

1const picker = new TimepickerUI(input, {
2  clock: { type: '12h' } // This is the default
3});
4picker.create();

Custom AM/PM Labels

#

Customize AM and PM labels for different languages or preferences:

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:

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '12h',
4    defaultTime: 'now'
5  }
6});
7picker.create();

Disabled Hours (12h)

#

Disable specific hours in 12h format:

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:

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();

Auto-switch to Minutes

#

Automatically switch to minutes after selecting hour:

1const picker = new TimepickerUI(input, {
2  clock: {
3    type: '12h',
4    autoSwitchToMinutes: true
5  }
6});
7picker.create();