Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

MudDatePicker

API documentation.

Check out the Examples for this component.

Properties

Name Type Default Description
DateChanged EventCallback<Nullable<DateTime>> Fired when the DateFormat changes.
Date Nullable<DateTime> null The currently selected date (two-way bindable). If null, then nothing was selected.
MaxDate Nullable<DateTime> null Max selectable date.
MinDate Nullable<DateTime> null Max selectable date.
OpenTo OpenTo OpenTo.Date First view to show in the MudDatePicker.
DateFormat String "yyyy-MM-dd" String Format for selected date view
FirstDayOfWeek Nullable<DayOfWeek> null Defines on which day the week starts. Depends on the value of Culture.
PickerMonth Nullable<DateTime> null The current month of the date picker (two-way bindable). This changes when the user browses through the calender. The month is represented as a DateTime which is always the first day of that month. You can also set this to define which month is initially shown. If not set, the current month is shown.
PickerMonthChanged EventCallback<Nullable<DateTime>> Fired when the date changes.
ClosingDelay Int32 100 Milliseconds to wait before closing the picker. This helps the user see that the date was selected before the popover disappears.
DisplayMonths Int32 1 Number of months to display in the calendar
MaxMonthColumns Nullable<Int32> null Maximum number of months in one row
StartMonth Nullable<DateTime> null Start month when opening the picker.
ShowWeekNumbers Boolean False Display week numbers according to the Culture parameter. If no culture is defined, CultureInfo.CurrentCulture will be used.
TitleDateFormat String "ddd, dd MMM" Format of the selected date in the title. Per default this is "ddd, dd MMM" which abbreviates day and month names. For instance, display the long names like this "dddd, dd. MMMM".
InputIcon String "<path d="M0 0h24v24H0z" fill="none"/><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/>" Sets the icon of the input text field
PickerOpened EventCallback Microsoft.AspNetCore.Components.EventCallback Fired when the dropdown / dialog opens
PickerClosed EventCallback Microsoft.AspNetCore.Components.EventCallback Fired when the dropdown / dialog closes
Elevation Int32 8 The higher the number, the heavier the drop-shadow. 0 for no shadow set to 8 by default in inline mode and 0 in static mode.
Square Boolean False If true, border-radius is set to 0 this is set to true automaticly in static mode but can be overridden with Rounded bool.
Rounded Boolean False If true, border-radius is set to theme default when in Static Mode.
HelperText String null If string has value, helpertext will be applied.
Label String null If string has value the label text will be displayed in the input, and scaled down at the top if the input has value.
Disabled Boolean False If true, the picker will be disabled.
Editable Boolean False If true, the picker will be editable.
DisableToolbar Boolean False Hide toolbar and show only date/time views.
ToolBarClass String null User class names for picker's ToolBar, separated by space
PickerVariant PickerVariant PickerVariant.Inline Picker container option
InputVariant Variant Variant.Text Variant of the text input
Adornment Adornment Adornment.End Sets if the icon will be att start or end, set to false to disable.
Orientation Orientation Orientation.Portrait What orientation to render in when in PickerVariant Static Mode.
IconSize Size Size.Medium Sets the Icon Size.
Color Color Color.Primary The color of the toolbar, selected and active. It supports the theme colors.
AllowKeyboardInput Boolean False Allows text input from keyboard.
TextChanged EventCallback<String> Fired when the text changes.
Text String null The currently selected string value (two-way bindable)
ClassActions String null CSS class that will be applied to the action buttons container
PickerActions RenderFragment null Define the action buttons here
Margin Margin Margin.None Will adjust vertical spacing.
Required Boolean False If true, this form input is required to be filled out.
RequiredError String "Required" Set an error text that will be displayed if the input is not filled out but required!
ErrorText String null The ErrorText that will be displayed if Error true
Error Boolean False If true, the label will be displayed in an error state.
Converter Converter<Nullable<DateTime>, String>
Culture CultureInfo
Validation Object null A validation func or a validation attribute. Supported types are: Func<T, bool> ... will output the standard error message "Invalid" if false Func<T, string> ... outputs the result as error message, no error if null Func<T, IEnumerable< string >> ... outputs all the returned error messages, no error if empty Func<T, Task< bool >> ... will output the standard error message "Invalid" if false Func<T, Task< string >> ... outputs the result as error message, no error if null Func<T, Task<IEnumerable< string >>> ... outputs all the returned error messages, no error if empty System.ComponentModel.DataAnnotations.ValidationAttribute instances
For Expression<Func<Nullable<DateTime>>> null Specify an expression which returns the model's field for which validation messages should be displayed. Currently only string fields are supported.
Class String null User class names, separated by space
Style String null User styles, applied on top of the component's own classes and styles
Tag Object null Use Tag to attach any user data object to the component for your convenience.
UserAttributes Dictionary<String, Object> UserAttributes carries all attributes you add to the component that don't match any of its parameters. They will be splatted onto the underlying HTML tag.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙