Our Blazor Date Edit component allows you to modify date values via a built-in dropdown calendar. You can enter date values directly into the text box or select one from the dropdown.

The DevExpress Blazor Date Edit component supports multiple size modes. To specify component size in code, use the SizeMode property. To apply different size modes within this demo, use the drop-down list in the demo card's header.

The Date Edit supports keyboard navigation (list of supported keyboard shortcuts), allowing users to navigate to the editor's input element and within the drop-down calendar (Date and Time sections).

Our Blazor Date Edit allows you to edit date-time values. Users can select values via the component's built-in time picker or enter the desired value within the component's edit box.

To add a time section to our Blazor Date Edit component, set the TimeSectionVisible property to true.

Use any of the following to clear the Blazor Date Edit and set its value to null:

• Delete the value within the Blazor Date Edit's editor.
• Click the Clear button. To display this button, set the ClearButtonDisplayMode property to Auto.

Use the NullText property to display placeholder text in the Date Edit when its value is null.

Use the DisplayFormat property to format our Blazor Date Edit's display value when the editor is not focused, and use the Format property to format the editor's value in edit mode when the editor is focused. If the DisplayFormat property is not set, the Format is applied in both display and edit modes.

The DevExpress Blazor Date Edit supports standard formats. See the Standard Date and Time Format Strings and Custom Date and Time Format Strings help topics for more information.

DevExpress Blazor Date-time masks allow users to enter only date and/or time values using a specific format. Users can navigate between mask sections and increase or decrease section values with the Up/Down arrow keys and the mouse wheel.

To apply a date-time mask to the Date Edit component, bind the component's Date property to a DateTime object, then assign a mask pattern to the Mask property. Use the DxDateTimeMaskProperties component to customize mask appearance and behavior as requirements dictate.

Use the settings available in this demo to explore different mask modes:

• Mask — Specifies the mask pattern.
• Caret Mode — Specifies whether to automatically move the caret to the next editable section once you complete input within a mask section (Advancing mode) or to move focus manually (Regular mode).
• Culture — Specifies the current culture. Culture can affect the appearance of a mask pattern.
• Cascading Section Updates — Specifies whether to increase or decrease the value of the previous or next mask section once you change a section's value with the Up/Down arrow key (or the mouse wheel) and the value passes the minimum or maximum threshold.

Like date-time masks, Date-time offset masks allow users to enter only date and/or time values using a specific format. Users can navigate between mask sections and increase or decrease section values with the Up/Down arrow keys and the mouse wheel. The difference is that date-time offset masks store time offsets from Coordinated Universal Time (UTC) and allow users to change offset values.

To apply a date-time offset mask to the Date Edit component, bind the component's Date property to a DateTimeOffset object, then assign a mask pattern to the Mask property. Use the DxDateTimeOffsetMaskProperties component to customize mask appearance and behavior as requirements dictate.

Use the settings available in this demo to explore different mask modes:

• Mask — Specifies the mask pattern.
• Caret Mode — Specifies whether to automatically move the caret to the next editable section once you complete input within a mask section (Advancing mode) or to move focus manually (Regular mode).
• Culture — Specifies the current culture. Culture can affect the appearance of a mask pattern.
• Cascading Section Updates — Specifies whether to increase or decrease the value of the previous or next mask section once you change a section's value with the Up/Down arrow key (or the mouse wheel) and the value passes the minimum or maximum threshold.

DevExpress Blazor Date Edit uses the time zone on the client to display and set DateTime values correctly - even if the server resides in a different time zone.

Our Blazor Date Edit also checks the Offset part of DateTimeOffset values and converts such values to the client time zone. To view the impact of the client time zone offset in this demo, change the time zone on your local machine.

To disable conversion at the project level, set the CompatibilitySettings.IgnoreClientDateTimeOffsetInDateEdit property to true.

Use the MinDate and MaxDate properties to specify a range of available dates. The Blazor Date Edit's calendar disables dates that are out of range and hides navigation arrows as appropriate. If a user enters a date that is out of range, the DevExpress Blazor Date Edit retains the previously selected date.

In this demo, the Blazor Date Edit component allows users to select dates within the current month.

In this demo, several dates within the Blazor Date Edit's calendar are grayed out (disabled) and cannot be selected. If a user clicks one a disabled date, the Blazor Date Edit's selected date does not change.

To disable selection of specific dates based on custom logic, use the CustomDisabledDate event.

You can use the DayCellTemplate property to highlight individual dates in the Date Edit's calendar. The template's context parameter allows you to access the current date-time object and its settings.

The code above applies different styles to different groups of dates.

Our Blazor Date Edit can adapt its data picker (date selector) to each device type. To specify a picker type, use the PickerDisplayMode property. The following values are supported:

• Auto (default) — Mobile and tablet devices display the datepicker as a scroll picker. Mobile devices also display a modal window for datepickers. Other device types display the datepicker as a calendar.
• Calendar — All devices display the datepicker as a calendar.
• ScrollPicker — All devices display the datepicker as a scroll picker.

When the datepicker is displayed as a scroll picker (in Auto or ScrollPicker mode), use the ScrollPickerFormat property to define the date format for each scroll picker segment (day, month, and year). Supported formats are:

• ddd — A day is specified by its date and the short name of the day of the week (for example, 15 Fri).
• dddd — A day is specified by its date and the full name of the day of the week (for example, 15 Friday).
• dd or d — A day is specified by its date (for example, 15).
• MMM — A month is specified by its short name (for example, Oct).
• M,MM,or MMMM — A month is specified by its full name (for example, October).
• y, yy, yyy, or yyyy — A year is specified by its full number (for example, 2019).

The order of specified formats defines the order of corresponding scroll picker segments.