Blazorise TimeEdit component

A native time input component build around the <input type="time">.



A native time field example with type="time".
<TimeEdit TValue="TimeSpan?" />


Two-way binding

By using bind-* attribute the selected time will be automatically assigned to the member variable.
<TimeEdit TValue="TimeSpan?" @bind-Time="@selectedTime" />
    TimeSpan? selectedTime;

Manual event binding

When using the event TimeChanged, you also must define the Time value attribute.
<TimeEdit TValue="TimeSpan?" Time="@selectedTime" TimeChanged="@OnTimeChanged" />
    TimeSpan? selectedTime;

    Task OnTimeChanged( TimeSpan? Time )
        selectedTime = Time;

        return Task.CompletedTask;

Show Picker

If you want to show the default picker that comes with the time input element you can make it by using the ShowPicker() function.

Note: Keep in mind that not all browser will support the ShowPicker() function.

    <Button Color="Color.Primary" Clicked="@(()=>timeEditRef.ShowPicker())">
        Show Picker
    <TimeEdit @ref="@timeEditRef" TValue="DateTime" />
@code {
    TimeEdit<DateTime> timeEditRef;


Name Description
ShowPicker() Show a browser picker for the time input.



Name Description Type Default
Time Gets or sets the input time value. TValue default
TimeChanged Occurs when the time has changed. EventCallback<TValue>
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
Autofocus Set’s the focus to the component after the rendering is done. bool false
Step The step attribute specifies the legal number intervals for seconds or milliseconds in a time field (does not apply for hours or minutes). int? null
On this page