Time Picker

Provides the user with a simple way to select time.

API
Basic Usage

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

@code{
    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-Checked="@readOnly" Color="Color.Tertiary">ReadOnly</MudSwitch>

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

@code{
    MudTimePicker _picker;
    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{
    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.

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

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

You can change the granularity of selectable times with the MinuteSelectionStep parameter.

:

:

:

<MudTimePicker PickerVariant="PickerVariant.Static" Color="Color.Primary" MinuteSelectionStep="1" Text="03:37 PM" OpenTo="OpenTo.Minutes" />
<MudTimePicker PickerVariant="PickerVariant.Static" Color="Color.Secondary" MinuteSelectionStep="5" Text="03:35 PM" OpenTo="OpenTo.Minutes" />
<MudTimePicker PickerVariant="PickerVariant.Static" Color="Color.Tertiary" MinuteSelectionStep="15" Text="03:45 PM" OpenTo="OpenTo.Minutes" />
Keyboard Navigation

MudTimePicker accepts keys to keyboard navigation.


Escape or Alt+ArrowUp keys to close dropdown

Enter or NumpadEnter or ArrowDown or ArrowUp keys to open dropdown

Space key to toggle open/close the picker (if it is not editable)

ArrowUp or Ctrl+ArrowRight keys to increase hour by 1

ArrowDown or Ctrl+ArrowLeft keys to decrease hour by 1

ArrowRight and ArrowLeft keys to increase/decrease minute by 1

Shift+ArrowRight and Shift+ArrowLeft keys to increase/decrease minute by 5

Ctrl+Shift+Backspace keys to reset (validation)

<MudTimePicker Label="12 hours" AmPm="true" @bind-Time="time" />
<MudTimePicker Label="24 hours" @bind-Time="time" />
<MudTimePicker Label="With action buttons">
    <PickerActions>
        <MudButton Class="mr-auto align-self-start" OnClick="@(() => context.Clear())">Clear</MudButton>
        <MudButton OnClick="@(() => context.Close(false))">Cancel</MudButton>
        <MudButton Color="Color.Primary" OnClick="@(() => context.Close())">Ok</MudButton>
    </PickerActions>
</MudTimePicker>

@code{
    TimeSpan? time = new TimeSpan(00, 45, 00);
}
Date Picker
Popover
An unhandled error has occurred. Reload 🗙