MudBlazor - Blazor Component Library

Pages

Date Range Picker

Properties

Data
Name	Type	Default	Description
`DateRange`	DateRange	null	The currently selected range (two-way bindable). If null, then nothing was selected.
`Text`	string	null	The currently selected string value (two-way bindable)
Validation
`Error`	bool	False	If true, the label will be displayed in an error state.
`ErrorId`	string	null	The ErrorId that will be used by aria-describedby if Error true
`ErrorText`	string	null	The ErrorText that will be displayed if Error true.
`For`	Expression<Func<DateTime?>>	null	Specify an expression which returns the model's field for which validation messages should be displayed.
`IsDateDisabledFunc`	Func<DateTime, bool>		Function to determine whether a date is disabled
`MaxDate`	DateTime?	null	Max selectable date.
`MinDate`	DateTime?	null	Min selectable date.
`Required`	bool	False	If true, this form input is required to be filled out.
`RequiredError`	string	"Required"	The error text that will be displayed if the input is not filled out but required.
`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<object, string, IEnumerable< string >> input Form.Model, Full Path of Member ... 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 Func<object, string, Task<IEnumerable< string >>> input Form.Model, Full Path of Member ... outputs all the returned error messages, no error if empty System.ComponentModel.DataAnnotations.ValidationAttribute instances
Behavior
`Adornment`	Adornment	Adornment.End	Sets if the icon will be att start or end, set to None to disable.
`AdornmentIcon`	string		Sets the icon of the input text field
`Clearable`	bool	False	Show clear button.
`Converter`	Converter<DateTime?, string>		The generic converter of the component.
`Culture`	CultureInfo		The culture of the component.
`DateFormat`	string	"M/d/yyyy"	String Format for selected date view
`Disabled`	bool	False	If true, the picker will be disabled.
`Editable`	bool	False	If true, the picker will be editable.
`HelperText`	string	null	If string has value, HelperText will be applied.
`HelperTextOnFocus`	bool	False	If true, the helper text will only be visible on focus.
`ImmediateText`	bool	False	If true and Editable is true, update Text immediately on typing. If false, Text is updated only on Enter or loss of focus.
`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.
`Mask`	IMask	null	A mask for structured input of the date (requires Editable to be true).
`PickerVariant`	PickerVariant	PickerVariant.Inline	Picker container option
`Placeholder`	string	null	The short hint displayed in the input before the user enters a value.
`PlaceholderEnd`	string	null	The short hint displayed in the end input before the user enters a value.
`PlaceholderStart`	string	null	The short hint displayed in the start input before the user enters a value.
`ReadOnly`	bool	False	If true, no date or time can be defined.
Appearance
`AdditionalDateClassesFunc`	Func<DateTime, string>	null	Function to conditionally apply new classes to specific days
`AdornmentAriaLabel`	string	"Open Date Range Picker"	Sets the aria-label of the input text field icon
`AdornmentColor`	Color	Color.Default	The color of the adornment if used. It supports the theme colors.
`AnchorOrigin`	Origin	Origin.TopLeft	Gets or sets the origin of the popover's anchor. Defaults to Origin.TopLeft
`DisableUnderLine`	bool	False	If true, the input will not have an underline.
`IconSize`	Size	Size.Medium	Sets the Icon Size.
`Margin`	Margin	Margin.None	Will adjust vertical spacing.
`SeparatorIcon`	string		Custom separator icon, leave null for default.
`TransformOrigin`	Origin	Origin.TopLeft	Gets or sets the origin of the popover's transform. Defaults to Origin.TopLeft
`Variant`	Variant	Variant.Text	Variant of the text input
Picker behavior
`AutoClose`	bool	False	If AutoClose is set to true and PickerActions are defined, selecting a day will close the MudDatePicker.
`ClosingDelay`	int	100	Sets the amount of time in milliseconds to wait before closing the picker. This helps the user see that the date was selected before the popover disappears.
`DisplayMonths`	int	2	Number of months to display in the calendar
`FirstDayOfWeek`	DayOfWeek?	null	Defines on which day the week starts. Depends on the value of Culture.
`FixDay`	int?	null	Set a predefined fix day - no day can be selected
`FixMonth`	int?	null	Set a predefined fix month - no month can be selected
`FixYear`	int?	null	Set a predefined fix year - no year can be selected
`OpenTo`	OpenTo	OpenTo.Date	First view to show in the MudDatePicker.
`PickerActions`	RenderFragment<MudPicker<DateTime?>>	null	Define the action buttons here
`PickerMonth`	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.
`ShowWeekNumbers`	bool	False	Display week numbers according to the Culture parameter. If no culture is defined, CultureInfo.CurrentCulture will be used.
`StartMonth`	DateTime?	null	Start month when opening the picker.
`TitleDateFormat`	string	"ddd, dd MMM"	Format of the selected date in the title. By default, this is "ddd, dd MMM" which abbreviates day and month names. For instance, display the long names like this "dddd, dd. MMMM".
Picker appearance
`ActionsClass`	string	null	CSS class that will be applied to the action buttons container
`Color`	Color	Color.Primary	The color of the toolbar, selected and active. It supports the theme colors.
`DisableToolbar`	bool	False	Hide toolbar and show only date/time views.
`Elevation`	int	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.
`MaxMonthColumns`	int?	null	Maximum number of months in one row
`NextIcon`	string		Custom next icon.
`Orientation`	Orientation	Orientation.Portrait	What orientation to render in when in PickerVariant Static Mode.
`PreviousIcon`	string		Custom previous icon.
`Rounded`	bool	False	If true, border-radius is set to theme default when in Static Mode.
`Square`	bool	False	If true, border-radius is set to 0 this is set to true automatically in static mode but can be overridden with Rounded bool.
`ToolBarClass`	string	null	User class names for picker's ToolBar, separated by space
Common
`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.

EventCallbacks

Name	Type	Description
`DateRangeChanged`	EventCallback<DateRange>	Fired when the DateFormat changes.
`OnClick`	EventCallback<MouseEventArgs>	Fired when the text input is clicked.
`PickerClosed`	EventCallback	Fired when the dropdown / dialog closes
`PickerMonthChanged`	EventCallback<DateTime?>	Fired when the date changes.
`PickerOpened`	EventCallback	Fired when the dropdown / dialog opens
`TextChanged`	EventCallback<string>	Fired when the text changes.

Methods

Name	Parameters	Return	Description
`ValueTask BlurAsync()`		ValueTask
`Task ClearAsync(bool close)`	bool close	Task
`Task CloseAsync(bool submit)`	bool submit	Task
`ValueTask FocusAsync()`		ValueTask
`ValueTask FocusEndAsync()`		ValueTask	Focuses the end date of MudDateRangePicker
`ValueTask FocusStartAsync()`		ValueTask	Focuses the start date of MudDateRangePicker
`string GetErrorText()`		string : Error text/message	Return the validation error text or the conversion error message.
`Task OpenAsync()`		Task
`Task ResetAsync()`		Task	Reset the value and the validation.
`ResetValidation()`			Reset the validation.
`ScrollToYear()`
`ValueTask SelectAsync()`		ValueTask
`ValueTask SelectEndAsync()`		ValueTask	Selects the end date of MudDateRangePicker
`ValueTask SelectRangeAsync(int pos1, int pos2)`	int pos1 int pos2	ValueTask
`ValueTask SelectRangeEndAsync(int pos1, int pos2)`	int pos1 : Start position of the selection int pos2 : End position of the selection	ValueTask	Selects the specified range of the end date text
`ValueTask SelectRangeStartAsync(int pos1, int pos2)`	int pos1 : Start position of the selection int pos2 : End position of the selection	ValueTask	Selects the specified range of the start date text
`ValueTask SelectStartAsync()`		ValueTask	Selects the start date of MudDateRangePicker
`Task ToggleOpenAsync()`		Task
`Task Validate()`		Task	Cause this component to validate its value.

MudDateRangePicker API

Pages

Properties

Data

Validation

Behavior

Appearance

Picker behavior

Picker appearance

Common

EventCallbacks

Methods