ComponentsPickers and uploads
Date picker
A text field that opens a calendar. Choose it when people pick one day and benefit from seeing the week around it; for dates they know by heart, such as a birthday, allow typing too.
Basic usage
Bind a nullable DateTime to Date (two-way, with @bind-Date). Null means no date has been chosen yet.
Booked for Saturday, November 14, 2026.
Inline, dialog and static
PickerVariant decides where the calendar lives: in a popover beside the field, in a modal dialog, or always visible on the page.
All three pickers share one value: 11/20/2026
Static
Every field variant and adornment
The closed field follows the same Variant as a text field. The adornment places the calendar button; with None, the field itself opens the calendar.
| Variant ↓ · Adornment → | None | Start | End |
|---|---|---|---|
| Text | |||
| Filled | |||
| Outlined |
Static calendars
Portrait and landscape orientation, a theme color, week numbers, a Monday start and a calendar without its toolbar.
Portrait, week numbers, Monday first
Without toolbar, with adjacent days
Landscape in the secondary color
Minimum, maximum and disabled dates
MinDate and MaxDate bound the calendar; IsDateDisabledFunc rules out individual days; AdditionalDateClassesFunc marks days without disabling them.
Open to the year or the month
OpenTo starts on the year or month list. Fix the day, or the month and day, to pick a month or a year instead of a date.
Cultures and formats
One date, three cultures. Culture supplies month and day names, the first day of the week and the default format.
Typing a date
Editable fields accept typed dates. A DateMask guides the entry and Clearable adds a button that empties the field.
Bound value: 2026-11-02
Action buttons
PickerActions adds buttons under the calendar. With AutoClose off, a choice is only committed when OK is pressed.
Committed: Monday, February 15, 2027
<MudDatePicker @bind-Date="_date" Label="Opening night" Variant="Variant.Outlined" />