Mudblazor
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Date Picker

Provides the user with a simple way to select a date.

See Date Picker API for parameter documentation.

Basic Usage

No header

For custom cultures

Hide code example
Copy Code
View the source on GitHub
<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

No header

For custom cultures

Hide code example
Copy Code
View the source on GitHub
<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

January 2021

SunMonTueWedThuFriSat

January 2021

SunMonTueWedThuFriSat
Hide code example
Copy Code
View the source on GitHub
<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.

Hide code example
Copy Code
View the source on GitHub
<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

January 2021

SunMonTueWedThuFriSat

January 2021

SunMonTueWedThuFriSat
Hide code example
Copy Code
View the source on GitHub
<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.

January 2021

SunMonTueWedThuFriSat

January 2021

SunMonTueWedThuFriSat
Hide code example
Copy Code
View the source on GitHub
<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))" />
An error has occurred. This application may no longer respond until reloaded. Reload 🗙