Overview

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 different size modes. To specify the component's size in code, use the SizeMode property. To apply different size modes in this demo, use the drop-down list in the demo card's header.

Time Section

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.

Null Date Values

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.

Display Format

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.

Date Range

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.

Disabled Dates

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.

Adaptive Datepicker

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.

Read-Only and Disabled Modes

In this demo, our Blazor Date Edit displays values but does not allow users to modify them. To implement this behavior, you can use any of the following:

  • Read-only mode: In this mode, you can use the keyboard to focus and navigate the component. Set the ReadOnly property to true to activate this mode.
  • Disabled mode: In this mode, the component cannot be focused or navigated. Set the Enabled property to false to activate this mode.