Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Time Picker

Provides the user with a simple way to select time.

See Time Picker API for parameter documentation.

Basic Usage

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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

:

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

:

:

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

:

:

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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" />
An error has occurred. This application may no longer respond until reloaded. Reload 🗙