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.

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>`
`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`