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="" /> <MudSwitch @bind-Checked="" Color="Color.Tertiary">ReadOnly</MudSwitch>
@code{ TimeSpan? time = new TimeSpan(00, 45, 00); private bool readOnly; }
<MudTimePicker @ref="_picker" Label="With action buttons" 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="" 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
1
2
3
4
5
6
7
8
9
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
<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
1
2
3
4
5
6
7
8
9
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
<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.
1
2
3
4
5
6
7
8
9
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
<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" />
<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); }