Timepicker
Time input with a dropdown of options at set intervals, built on MatTimepicker
Contents
Required
Attach the required validator to the control to mark the field as mandatory. Press Validate without selecting a time to surface the error state.
Min / max range
Pass a min and/or max Date to constrain the selectable time. Options outside the range are excluded from the dropdown, and typing an out-of-range time (e.g. before 09:00 or after 17:00) marks the control invalid.
Invalid input
The underlying picker validates typed input. Entering a value it cannot parse as a time (e.g. 99:99 or abc) marks the control invalid.
Disabled
A disabled timepicker cannot be interacted with and is skipped during validation.
Display Validation
By default, the validation error message is displayed below the timepicker field. If you want to hide the validation error message, you can set the displayValidation input to false. This is useful when you'll use fl-timepicker within a new component that has its own validation.
Note: If you set the displayValidation input to false, you must display the validation error message in the new component yourself.
Disable the time input and toggle.
Latest selectable time. Only the time portion of the Date is used.
Earliest selectable time. Only the time portion of the Date is used.
Display the validation error message.
FormControl that holds the selected time as a Date object.
Accessible label for the time input, used by screen readers.