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

In the following example, the Blazorise TimePicker is easily set up and bound to a value by setting the @bind- directive. 
<TimePicker TValue="TimeSpan?" @bind-Time="@value" />

@code {
    TimeSpan? value;
}

DateTime example

In the following example, the Blazorise TimePicker component is easily configured to bind with a DateTime? type, demonstrating its versatility. 
<TimePicker TValue="DateTime?" @bind-Time="@value" />

@code {
    DateTime? value;
}

Add icon

To add icon you can combine TimePicker with an Addon. 
<Addons>
    <Addon AddonType="AddonType.Body">
        <TimePicker @ref="@timePicker" TValue="TimeSpan?" @bind-Time="@value" />
    </Addon>
    <Addon AddonType="AddonType.End">
        <Button Color="Color.Light" Clicked="@(()=>timePicker.ToggleAsync())">
            <Icon Name="IconName.CalendarDay" />
        </Button>
    </Addon>
</Addons>

@code{
    TimePicker<TimeSpan?> timePicker;

    TimeSpan? value;
}

Inline Time

To always show the time menu you just need to set Inline parameter. 
<TimePicker TValue="TimeSpan?" @bind-Time="@value" Inline />

@code {
    TimeSpan? value;
}

Non Static example

By default, the time menu will position statically. This means that it will also keep its position relative to the page when you scroll.

If you want to disable this behavior, you should assign the value false to the StaticPicker parameter. 

<TimePicker TValue="TimeSpan?" @bind-Time="@value" StaticPicker="false" />

@code {
    TimeSpan? value;
}

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
StaticPicker If enabled, the time menu will be positioned as static. bool true
On this page