Blazorise TimeEdit component

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

Examples

Basic

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

<TimeEdit TValue="TimeSpan?" />

Binding

Two-way binding

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

<TimeEdit TValue="TimeSpan?" @bind-Time="@selectedTime" />

@code{
    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" />

@code{
    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.

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

@code {
    TimeEdit<DateTime> timeEditRef;
}

Functions

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