Timepicker
Time selection input built on Angular Material
A timepicker component that wraps Angular Material's MatTimepicker. Provides a text input with a dropdown of time options at configurable intervals.
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.
FormControl that holds the selected time as a Date object.
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.
Time step between each option in the dropdown.
Accessible label for the time input, used by screen readers.
Expands to fill the parent width instead of fitting the time value.
Placeholder text shown when no time is selected.