Basic Usage
<MudTimePicker Label="12 hours" AmPm="true" @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); }
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" />