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" />
MinuteSelectionStep
You can change the granularity of selectable times with the MinuteSelectionStep
parameter.
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
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
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.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" />
<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); }