Blazorise TimeInput component

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

Examples

Basic

A native time field example with type="time".

<TimeInput TValue="TimeSpan?" />

Binding

Two-way binding

By using bind-* attribute the selected time will be automatically assigned to the member variable.

<TimeInput TValue="TimeSpan?" @bind-Value="@selectedTime" />

@code{
    TimeSpan? selectedTime;
}

Manual event binding

When using the event ValueChanged, you also must define the Value value attribute.

<TimeInput TValue="TimeSpan?" Value="@selectedTime" ValueChanged="@OnValueChanged" />

@code{
    TimeSpan? selectedTime;

    Task OnValueChanged(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.

<Field>
    <Button Color="Color.Primary" Clicked="@(() => timeInputRef.ShowPicker())">
        Show Picker
    </Button>
</Field>
<Field>
    <TimeInput @ref="@timeInputRef" TValue="DateTime" />
</Field>

@code {
    TimeInput<DateTime> timeInputRef;
}

Functions

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

Best Practices

Time Format

Use a visible label and make the expected time format clear according to the user's culture. State the relevant time zone whenever the value refers to an event shared across locations.

Empty vs. Invalid

Use a nullable value when an empty time is valid, and validate business-hour or ordering constraints when the form is processed. When selecting from regular increments is easier than entering an exact time, use a TimePicker.

API

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

<TimeInput />