TimePicker component

The <TimePicker> is stand-alone component that can be utilized in many existing Blazorise components. It offers the user a visual representation for selecting the 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.

Examples

Basic example

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