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)

With action buttons

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker Label="12 hours" AmPm="true" @bind-Time="time" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker Label="24 hours" @bind-Time="time" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker Label="24 hours (editable)" Editable="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker @ref="_picker" Label="With action buttons">
            <PickerActions>
                <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.Clear())">Clear</MudButton>
                <MudButton OnClick="@(() => _picker.Close(false))">Cancel</MudButton>
                <MudButton Color="Color.Primary" OnClick="@(() => _picker.Close())">Ok</MudButton>
            </PickerActions>
        </MudTimePicker>
    </MudItem>
</MudGrid>

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

Dialog Mode

12 hours

24 hours

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

@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

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker Label="Normal" @bind-Time="time" TimeEditMode="TimeEditMode.Normal" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker Label="OnlyHours" @bind-Time="time" TimeEditMode="TimeEditMode.OnlyHours" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker Label="OnlyMinutes" @bind-Time="time" TimeEditMode="TimeEditMode.OnlyMinutes" />
    </MudItem>
</MudGrid>

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