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 implemented with native Blazor and C# and has no third-party JavaScript dependency. Unlike TimeInput, which renders type="time", TimePicker renders a text input and a provider-styled time menu. The DisplayFormat parameter retains the .NET-style picker format syntax used by earlier versions, such as HH:mm or hh:mm tt.

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-Value="@value" />

@code {
    TimeSpan? value;
}

With DateTime

In the following example, the Blazorise TimePicker component is easily configured to bind with a DateTime? type, demonstrating its versatility.

<TimePicker TValue="DateTime?" @bind-Value="@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-Value="@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-Value="@value" Inline />

@code {
    TimeSpan? value;
}

Non-static menu

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-Value="@value" StaticPicker="false" />

@code {
    TimeSpan? value;
}

Time increments

Use the HourIncrement and MinuteIncrement parameters to control the step intervals in the time selection dropdown.

<TimePicker TValue="TimeSpan?" HourIncrement="2" MinuteIncrement="30" />

Default time

By default the time elements are set to 12:00. To change it use the DefaultHour and DefaultMinute parameters.

<TimePicker TValue="TimeSpan?" DefaultHour="9" DefaultMinute="15" />

Enable Seconds

By default, the time picker does not include seconds in the selection. This simplifies the input for use cases where precision to the second is not required.

If you want to enable seconds in the time picker, you should assign the value true to the Seconds parameter.

<TimePicker TValue="TimeSpan?" @bind-Value="@value" Seconds />

@code {
    TimeSpan? value;
}

Best Practices

Offer Meaningful Increments

Choose increments that match the scheduling domain, such as 15-minute intervals, rather than presenting an unnecessarily long list. Provide a clear way to type or clear the value when the available increments do not cover every valid case.

Avoid False Precision

Enable seconds only when users genuinely need that precision. Format the selected time according to the user's locale and state the time zone whenever the value is shared across locations.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<TimePicker />