TimePicker

The TimePicker component supports different variants to suit different use cases:

• Standard TimePicker: Uses a clock face interface for intuitive time selection with regular size.
• Compact TimePicker: Smaller variant good for space-constrained interfaces.
• Vertical Orientation: Compact layout with clock below time display, best for mobile devices.
• Horizontal Orientation: Wider layout with clock beside time display, optimized for desktop views.

The TimePicker component supports different time formats to match your application's needs:

• 12-Hour Format (AM/PM): Common in the US and some other countries, uses AM/PM indicators.
• 24-Hour Format (Military): Common internationally, eliminates AM/PM confusion.
• Seconds Display: Optional seconds for precise time entry, useful for scheduling systems.

You can customize the format using the format and showSeconds properties:

const timePicker = createTimePicker({
  format: TIME_FORMAT.FORMAT_24,  // Use 24-hour format
  showSeconds: true              // Show seconds selector
});

Time constraints can be applied in different ways:

• Using the minTime property to prevent selection before a certain time
• Using the maxTime property to prevent selection after a certain time
• Using the minuteStep property to restrict minutes to specific intervals (e.g., 15-minute slots)
• Using the secondStep property for second intervals when seconds are displayed

Time constraints are useful for:

• Restricting selection to business hours
• Creating appointment slots
• Setting up delivery windows
• Creating predefined time ranges

Invalid times that fall outside constraints will be automatically adjusted to the nearest valid time.

2:30 PM

Available API Methods:

• timePicker.setValue(time): Sets the selected time (format: 'HH:MM' or 'HH:MM:SS')
• timePicker.getValue(): Gets the current time value as a string
• timePicker.getTimeObject(): Gets the time as an object with hours, minutes, seconds, and period
• timePicker.open(): Opens the time picker
• timePicker.close(): Closes the time picker
• timePicker.toggle(): Toggles the time picker open/closed state
• timePicker.setType(type): Sets the picker type (DIAL or INPUT)
• timePicker.getType(): Gets the current picker type
• timePicker.setFormat(format): Sets the time format (AMPM or MILITARY)
• timePicker.getFormat(): Gets the current format
• timePicker.on(event, handler): Adds an event listener
• timePicker.off(event, handler): Removes an event listener

Available Events:

• change: Fired when the selected time changes
• open: Fired when the time picker opens
• close: Fired when the time picker closes
• confirm: Fired when the user confirms a time selection
• cancel: Fired when the user cancels time selection

Customizing TimePickers

The TimePicker component offers several customization options:

1. Custom Text and Labels

const timePicker = createTimePicker({
  title: 'Schedule Your Call',     // Custom title
  cancelText: 'Dismiss',           // Custom cancel button text
  confirmText: 'Schedule'          // Custom confirm button text
});

2. Custom Icons

const timePicker = createTimePicker({
  clockIcon: '<svg>...</svg>',    // Custom clock icon SVG
  keyboardIcon: '<svg>...</svg>'  // Custom keyboard icon SVG
});

3. Custom Container

const timePicker = createTimePicker({
  container: document.getElementById('my-container'),  // Custom container element
  isOpen: true  // Start open when using a custom container for inline display
});

4. CSS Customization

You can customize the appearance further using CSS:

/* Custom time picker styling */
.mtrl-time-picker-dialog {
  --mtrl-primary: #0088ff;
  --mtrl-on-primary: #ffffff;
  
  /* Custom shadows */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Custom dial styling */
.mtrl-time-picker-dial-face {
  background-color: #f0f8ff;
}