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`