Time Picker - MudBlazor

Basic Usage

Note: Always use the two-way binding @bind-Time to bind to a field of type TimeSpan?

12 hours

24 hours

24 hours (editable)

<MudTimePicker Label="12 hours" AmPm="true" @bind-Time="time" />
<MudTimePicker Label="24 hours" @bind-Time="time" />
<MudTimePicker Label="24 hours (editable)" Editable="true" />

@code{ TimeSpan? time = new TimeSpan(00, 45, 00); }

Dialog Mode

12 hours

24 hours

<MudTimePicker PickerVariant="PickerVariant.Dialog" Label="12 hours" AmPm="true" @bind-Time="time" />
<MudTimePicker PickerVariant="PickerVariant.Dialog" Label="24 hours" @bind-Time="time" />

@code{
    TimeSpan? time = new TimeSpan(00, 45, 00);
}

Static Mode

<MudTimePicker PickerVariant="PickerVariant.Static" @bind-Time="time" AmPm="true" />
<MudHidden Breakpoint="@Breakpoint.Xs">
    <MudTimePicker PickerVariant="PickerVariant.Static" Orientation="Orientation.Landscape" @bind-Time="time" />
</MudHidden>

@code{
    TimeSpan? time = new TimeSpan(13, 37, 00);
}

Open to Minutes

By default MudTimePicker opens the hours editor and then switches into the minutes editor. By setting OpenTo="OpenTo.Minutes" it will open the minutes editor instead.

Minutes

<MudTimePicker Label="Minutes" Text="13:37" OpenTo="OpenTo.Minutes" />

Edit Mode

By setting the TimeEditMode you can restrict editing of the time value to allow only changing hours or minutes.

Normal

OnlyHours

OnlyMinutes

<MudTimePicker Label="Normal" @bind-Time="time" TimeEditMode="TimeEditMode.Normal" />
<MudTimePicker Label="OnlyHours" @bind-Time="time" TimeEditMode="TimeEditMode.OnlyHours" />
<MudTimePicker Label="OnlyMinutes" @bind-Time="time" TimeEditMode="TimeEditMode.OnlyMinutes" />

@code{

    TimeSpan? time = new TimeSpan(13, 37, 00);
}

Colors

<MudTimePicker PickerVariant="PickerVariant.Static" Color="Color.Success" Rounded="true" Text="03:37 PM" AmPm="true" />
<MudTimePicker PickerVariant="PickerVariant.Static" Color="Color.Secondary" Rounded="true" Text="13:37"/>

Elevation

You can change the elevation with the Elevation parameter the default value is 0 for static and 8 for inline.

<MudTimePicker PickerVariant="PickerVariant.Static" Color="Color.Success" Rounded="true" Elevation="1" Text="03:37 PM" AmPm="true" />
<MudTimePicker PickerVariant="PickerVariant.Static" Color="Color.Secondary" Rounded="true" Elevation="12" Text="13:37" />