Time Picker

Provides the user with a simple way to select time.

API
Basic Usage

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

<MudTimePicker Label="12 hours" AmPm="true" @bind-Time="_time" />
<MudTimePicker Label="12 hours custom format" AmPm="true" TimeFormat="h:mm tt" @bind-Time="_time" />
<MudTimePicker Label="24 hours" @bind-Time="_time" />
<MudTimePicker Label="24 hours (editable)" Editable="true" @bind-Time="_time" />

@code{
    private TimeSpan? _time = new TimeSpan(00, 45, 00);
}
Read Only

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.

<MudTimePicker Label="12 hours" AmPm="true" @bind-Time="_time" ReadOnly="@_readOnly" />
<MudSwitch @bind-Value="_readOnly" Color="Color.Tertiary">ReadOnly</MudSwitch>

@code{
    private TimeSpan? _time = new TimeSpan(00, 45, 00);
    private bool _readOnly;

}
Action Buttons

You can add buttons by using the PickerActions render fragment. 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.

<MudTimePicker @ref="_picker" Label="With action buttons" AutoClose="@_autoClose">
    <PickerActions>
        <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton>
        <MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
        <MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">Ok</MudButton>
    </PickerActions>
</MudTimePicker>
<MudSwitch @bind-Value="_autoClose" Color="Color.Secondary">AutoClose</MudSwitch>

@code{
    private MudTimePicker _picker;
    private readonly TimeSpan? _time = new TimeSpan(00, 45, 00);
    private bool _autoClose;
}
Dialog Mode

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

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

<MudTimePicker Label="Minutes" Text="13:37" OpenTo="OpenTo.Minutes" />
An error has occurred. This application may no longer respond until reloaded. Reload 🗙