Overview

Date: Tuesday, 27 July 2021

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

Date: Tuesday, 27 July 2021 04:38:21

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 and Placeholder

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.

Mask

Mask loading...

Date: 7/27/2021 12:00:00 AM

Our Date Edit component supports masked input. If you specify a mask, the input box only accepts values in a specific date format.

To enable this functionality, assign the pattern to the component’s Mask property. The DxDateTimeMaskProperties component specifies additional mask settings (such as culture or caret mode). For more information about Date-Time masks, refer to the following help topic: Date-Time Masks.

Try the Mask, Caret Mode, and Culture settings to explore the different date-time mask modes.

Date Range

Date: Tuesday, 27 July 2021

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

Date: Tuesday, 27 July 2021

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.