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{ private 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-Value="_readOnly" Color="Color.Tertiary">ReadOnly</MudSwitch>
@code{ private TimeSpan? _time = new TimeSpan(00, 45, 00); private bool _readOnly; }
<MudTimePicker @ref="_picker" Label="With action buttons" AutoClose="@_autoClose"> <PickerActions> <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton> <MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton> <MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">Ok</MudButton> </PickerActions> </MudTimePicker> <MudSwitch @bind-Value="_autoClose" Color="Color.Secondary">AutoClose</MudSwitch>
@code{ private MudTimePicker _picker; private readonly TimeSpan? _time = new TimeSpan(00, 45, 00); private bool _autoClose; }