Basic Usage
<MudDatePicker Label="Basic example" Value="2020-10-19" /> <MudDatePicker Label="Basic example (editable)" Editable="true" /> <MudDatePicker Label="Only Calendar" Value="2020-10-19" DisableToolbar="true" HelperText="No header" /> <MudDatePicker Label="Date Format" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" Date="@(new System.DateTime(2020,10,19))" />
Dialog Mode
<MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Picker example" Value="2020-10-19"/> <MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Only Calendar" Value="2020-10-19" DisableToolbar="true" HelperText="No header" /> <MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Date Format" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" Date="@(new System.DateTime(2020,10,19))" />
Static Mode
SunMonTueWedThuFriSat
SunMonTueWedThuFriSat
<MudDatePicker PickerVariant="PickerVariant.Static" Date="@(DateTime.Today.AddDays(1))"/> <MudDatePicker PickerVariant="PickerVariant.Static" Orientation="Orientation.Landscape" Date="@(DateTime.Today.AddDays(1))"/>
Different views
By default it opens to Date, but can be set to Year or Month.
<MudDatePicker Label="Year" OpenTo="OpenTo.Year" Value="2020-10-19"/> <MudDatePicker Label="Month" OpenTo="OpenTo.Month" Value="2020-10-19" /> <MudDatePicker Label="Date" Value="2020-10-19" />
Colors
SunMonTueWedThuFriSat
SunMonTueWedThuFriSat
<MudDatePicker PickerVariant="PickerVariant.Static" Color="Color.Success" Rounded="true" Date="@(DateTime.Today.AddDays(1))" /> <MudDatePicker PickerVariant="PickerVariant.Static" Color="Color.Secondary" Rounded="true" Date="@(DateTime.Today.AddDays(1))" />
Elevation
You can change the elevation with the Elevation
parameter the default value is 0 for static and 8 for inline.
SunMonTueWedThuFriSat
SunMonTueWedThuFriSat
<MudDatePicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="1" Date="@(DateTime.Today.AddDays(1))" /> <MudDatePicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="12" Date="@(DateTime.Today.AddDays(1))" />