Time Picker - MudBlazor

Basic Usage

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

If AutoClose is set to true and PickerActions are defined, the hour and the minutes can be selected and the drop-down will close without having to click any of the action buttons. If ReadOnly is set to true, the TimePicker can be used but the value will remain unchanged regardless of the actions performed or the values entered.

12 hours

ReadOnly

12 hours custom format

24 hours

24 hours (editable)

With action buttons

AutoClose

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker Label="12 hours" AmPm="true" @bind-Time="time" ReadOnly="@readOnly" />
        <MudSwitch @bind-Checked="@readOnly" Color="Color.Tertiary">ReadOnly</MudSwitch>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudTimePicker Label="12 hours custom format" AmPm="true" TimeFormat="h:mm tt" @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" AutoClose="@autoClose">
            <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>
        <MudSwitch @bind-Checked="@autoClose" Color="Color.Secondary">AutoClose</MudSwitch>
    </MudItem>
</MudGrid>

@code{
    MudTimePicker _picker;
    TimeSpan? time = new TimeSpan(00, 45, 00);
    private bool autoClose;
    private bool readOnly;

}

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