Blazorise TimePicker component
A customizable time input component with an option to manually write time or choose from a menu.
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 combineTimePicker
with an Addon
.
<Addons> <Addon AddonType="AddonType.Body"> <TimePicker @ref="" 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;
}
Inline Time
To always show the time menu you just need to setInline
parameter.
<TimePicker TValue="TimeSpan?" Inline />
API
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 |
Inline |
Display the time menu in an always-open state with the inline option. | bool |
false |