The TimePicker component allows users to select a specific time of day. Unlike the DatePicker, this component focuses only on hours, minutes, and optionally seconds.
1. Basic Properties
- Name → Unique identifier for the component (e.g.,
TimePicker1). - Label → Text displayed above the input (e.g.,
Time picker). - Default value → Initial value when the component loads.
- Example:
{{ new Date() }}This initializes with the current time.
- Example:
- Placeholder → Shown when no time is selected.
2. States
- Read only → Shows the field without allowing changes.
- Disabled → Grays out the field and prevents interaction.
- Hidden → Hides the field but keeps it functional in logic.
- Show clear button → Allows the user to reset the selected time.
3. Layout
Defines responsive placement and spacing inside grids or forms.
📘 See Common Properties → Layout.
4. Events
- onChange → Triggered whenever the user selects a new time.
- Example usage: updating a schedule, triggering a workflow, or validating input.
5. Validations
- Ensures that a valid time is selected.
- Can be required for workflows where time input is mandatory.
📘 See Common Properties → Validations.
6. Format
The format property controls how the selected time is displayed:
- hh:mm → Hours and minutes (default).
- hh:mm:ss → Hours, minutes, and seconds.
- mm:ss → Minutes and seconds (useful for timers).
- custom → Allows defining a custom format.
7. Style
Supports custom styling such as:
- Font size
- Colors
- Alignment
- Spacing
📘 See Common Properties → Style.
8. Business Use Cases
- Meeting scheduling → Choose a start time for an appointment.
- Shift planning → Define work hours for employees.
- Reminders & alarms → Pick a time for notifications.
- Timers & countdowns → Set exact time durations.
✅ The TimePicker component is a lightweight but essential tool for time-specific inputs, with flexible formatting options and strong integration into workflows.