The Time widget component allows users to select a time within a defined range and at specified intervals. This is useful for scheduling, booking systems, or any form requiring time input.
{
"key": "InputKey",
"type": "customtimepicker",
"props": {
"label": "Input Name",
"required": true,
"placeholder": "Input Placeholder",
"startHour": 8,
"endHour": 16,
"interval": 40
},
"validation": {
"messages": {
"required": "Error message for `required`"
}
}
}
| Property | Type | Description |
|---|---|---|
key |
string | Unique identifier for the field in the form. |
type |
string | Type of component: customtimepicker in this case. |
props.label |
string | The visible label for the input. |
props.required |
boolean | Marks the field as required. If true, the user cannot submit without selecting a time. |
props.placeholder |
string | Placeholder text displayed inside the input before selection. |
props.startHour |
number | The earliest selectable hour in the time picker (e.g., 8 = 8:00 AM). |
props.endHour |
number | The latest selectable hour (e.g., 16 = 4:00 PM). |
props.interval |
number | Interval in minutes between selectable times (e.g., 40 = 8:00, 8:40, 9:20, ...). |
The validation.messages object provides custom error messages.
required is true and the user leaves the field empty, the message "Error message for required" will be displayed.Additional validations (e.g., min/max time, custom business rules) can be added through the UI or extended programmatically.
Widget Tab
Settings Tab
Display Rule
startHour and endHour in increments of interval.