Feature

12h/24h Clock Format

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

12-Hour Format (Default)

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"

24-Hour Format

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"

Dynamic Switching

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.