12h/24h Clock Format

12-hour format is the default. It shows hours 1 to 12 with AM and PM buttons, and getValue().time returns a string such as 10:30 AM. Set clock.type to '12h' to be explicit.

The default clock format with AM/PM indicators:

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

Features:

• Hours range from 1 to 12
• AM/PM toggle buttons
• Returns time in format: "10:30 AM"

Pass clock: { type: '24h' } to the constructor. Hours then run 0 to 23 with no AM/PM, and getValue().time returns a string such as 14:30.

Military time format without AM/PM:

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

Features:

• Hours range from 0 to 23
• No AM/PM indicators
• Returns time in format: "14:30"

Set clock.type to 'auto'. The picker picks 12h or 24h from the browser locale when it is created and each time its options are set. New in 4.5.0.

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

Yes. Call picker.setOptions({ clock: { type: '24h' } }) to switch format after the picker is created. A valid time in the input is rewritten in the new format.

Change clock format dynamically with setOptions():

1// Start with 12h format
2const picker = new TimepickerUI(input, {
3  clock: {
4    type: '12h'
5  }
6});
7picker.create();
8
9// Switch to 24h format
10picker.setOptions({ clock: { type: '24h' } });

12-Hour Format Output

1const value = picker.getValue();
2console.log(value);
3
4// Output:
5{
6  hour: '10',
7  minutes: '30',
8  type: 'AM',
9  time: '10:30 AM',
10  degreesHours: 300,   // deprecated
11  degreesMinutes: 180  // deprecated
12}

24-Hour Format Output

1const value = picker.getValue();
2console.log(value);
3
4// Output:
5{
6  hour: '14',
7  minutes: '30',
8  type: undefined,
9  time: '14:30',
10  degreesHours: 420,   // deprecated
11  degreesMinutes: 180  // deprecated
12}