A time-of-day picker with no calendar component. Use when the user picks only an hour and minute.
Read Form Rules before using this component — keys, labels, required fields, expressions, visibility, and validation all follow shared conventions.
Instead of customtimepicker, use… |
For… |
|---|---|
customdatepicker |
A calendar date with no time component |
customdatetimepicker |
A combined date-and-time value |
input with pattern |
A free-text duration like "2h30m" (not a clock time) |
| Prop | Type | Required? | Description |
|---|---|---|---|
label |
string |
required | Visible label. Must be unique across the form. |
required |
boolean |
required | Always false. The expression controls the runtime value. |
defaultRequired |
boolean |
required | true for required fields, false for optional ones. |
placeholder |
string |
optional | Ghost text shown before a value is selected. |
startHour |
number |
optional | Earliest selectable hour in 24h format (e.g. 8 for 08:00). |
endHour |
number |
optional | Latest selectable hour in 24h format (e.g. 18 for 18:00). |
interval |
number |
optional | Minute interval between time slots (e.g. 15 for quarter-hour steps). |
disabled |
boolean |
optional | Default false. Disables the picker. |
readonly |
boolean |
optional | Default false. Renders the field as read-only. |
tooltip |
string |
optional | Help text shown as an icon tooltip next to the label. |
hint |
string |
optional | Help text rendered below the field, always visible. |
internalDescription |
string |
optional | Internal note; not rendered to end users. |
hideField |
boolean |
optional | Hides the field and excludes its value from submission. Toggle via expressions["props.hideField"]. |
className |
string |
optional | CSS class applied to the field wrapper. |
Every customtimepicker field must include this exact expression, regardless of whether the field is required or optional.
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
}
defaultRequired: true.defaultRequired: false.{
"key": "PREFERRED_CONTACT_TIME",
"type": "customtimepicker",
"props": {
"label": "Preferred Contact Time",
"required": false,
"defaultRequired": false
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {}
}
}
{
"key": "PREFERRED_CONTACT_TIME",
"type": "customtimepicker",
"props": {
"label": "Preferred Contact Time",
"placeholder": "Select a time",
"required": false,
"defaultRequired": true
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {
"required": "Preferred Contact Time is required."
}
}
}
{
"key": "PREFERRED_CONTACT_TIME",
"type": "customtimepicker",
"props": {
"label": "Preferred Contact Time",
"placeholder": "Select a time",
"required": false,
"defaultRequired": true,
"startHour": 8,
"endHour": 18,
"interval": 30
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {
"required": "Preferred Contact Time is required."
}
}
}
customtimepicker when a date component is also needed — use customdatetimepicker instead.customtimepicker for a date-of-birth or calendar date — use customdatepicker.props.required: true directly — always use defaultRequired: true with the standard expression.validators: { validation: [...] } instead of validation: { messages: {} } for required messages.startHour/endHour/interval as strings — they must be numbers.disabled to gate input — prefer readonly and toggle it via expressions["props.readonly"].key is UPPER_SNAKE_CASE and unique across the entire formprops.label is present, unique, and correctly casedsections > formly-group > block > customtimepickerrequired: false is set (never true)defaultRequired is setexpressions["props.required"] is present with the exact required expressionvalidation.messages.required is present when defaultRequired: truestartHour, endHour, and interval are numbers, not stringscustomtimepicker for date or date-and-time values