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:

const picker = new TimepickerUI(input, {
  clockType: '12h'
});
picker.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:

const picker = new TimepickerUI(input, {
  clockType: '24h'
});
picker.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:

// Start with 12h format
const picker = new TimepickerUI(input, {
  clockType: '12h'
});
picker.create();

// Switch to 24h format
picker.update({
  options: { clockType: '24h' },
  create: true
});

Value Format

12-Hour Format Output

const value = picker.getValue();
console.log(value);

// Output:
{
  hour: '10',
  minutes: '30',
  type: 'AM',
  time: '10:30 AM',
  degreesHours: 30,
  degreesMinutes: 180
}

24-Hour Format Output

const value = picker.getValue();
console.log(value);

// Output:
{
  hour: '14',
  minutes: '30',
  type: '',
  time: '14:30',
  degreesHours: 30,
  degreesMinutes: 180
}

💡

Tip

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