Feature

12h/24h Clock Format

Support for both 12-hour and 24-hour clock formats with automatic AM/PM handling

How do I use 12-hour (AM/PM) 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:

index.tstypescript

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"

How do I switch to 24-hour format?

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:

index.tstypescript

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"

Can I change the clock format at runtime?

Yes. Call picker.update({ options: { clock: { type: '24h' } }, create: true }) to switch format after the picker is created.

Change clock format dynamically using the update method:

index.tstypescript

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.update({
11  options: { clock: { type: '24h' } },
12  create: true
13});

Value Format

12-Hour Format Output

index.tstypescript

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: 30,
11  degreesMinutes: 180
12}

24-Hour Format Output

index.tstypescript

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

Tip

The clock format affects both the visual display and the returned time format. Choose based on your application's locale and user expectations.