TimePicker component

Time

TimePicker is based on a flatpickr time picker and as such is not a native time input element. That means that unlike TimeEdit which will render type="time", TimePicker will render type="text" in the DOM.

Simple usage

<TimePicker TValue="TimeSpan?" />

Add icon

To add icon you can combine TimePicker with an Addon.

<Addons>
    <Addon AddonType="AddonType.Body">
        <TimePicker @ref="@timePicker" TValue="TimeSpan?" />
    </Addon>
    <Addon AddonType="AddonType.End">
        <Button Color="Color.Light" Clicked="@(()=>timePicker.ToggleAsync())">
            <Icon Name="IconName.CalendarDay" />
        </Button>
    </Addon>
</Addons>
@code{
    TimePicker<TimeSpan?> timePicker;
}

Attributes

Name	Type	Default	Description
Time	TValue	default	Gets or sets the input time value.
Time	EventCallback<TValue>		Occurs when the time has changed.
Min	TimeSpan?	null	The earliest time to accept.
Max	TimeSpan?	null	The latest time to accept.
Pattern	string	null	The pattern attribute specifies a regular expression that the input element’s value is checked against on form submission.
Placeholder	string	null	Sets the placeholder for the empty time.
DisplayFormat	string	null	Defines the display format of the time.
TimeAs24hr	bool	false	Displays time picker in 24 hour mode without AM/PM selection when enabled.