Date Edit - Overview

Date Edit is a date editor with a dropdown calendar. You can enter a date into the text box or pick one from the dropdown.

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

Date Edit - Nullable Date

Do any of the following to clear the Date Edit (set its value to null):

  • Delete the value in the 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.

Date Edit - Display FormatNew

Use the DisplayFormat property to format the 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 both in display and edit modes.

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 Edit - Date RangeNew

Use the MinDate and MaxDate properties to specify a range of available dates. The Date Edit's calendar disables dates that are out of the range and hides navigation arrows for them. If a user types a date that is out of the range, the Date Edit keeps the previously selected date.

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

Date Edit - Adaptive Datepicker

Date Edit allows you to adapt a displayed datepicker to a device type. To specify a picker type, use the PickerDisplayMode property that supports the following values:

  • Auto (default) - Mobile and tablet devices display a datepicker as a scroll picker. Also, mobile devices show a modal window to display datepickers. Other device types display a datepicker as a calendar.
  • Calendar - All devices display a datepicker as a calendar.
  • ScrollPicker - All devices display a 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 a date format for each scroll picker part (a day, month, and year). The supported formats are:

  • ddd - A day is specified by the date and a short name of the day of the week, for example, 15 Fri.
  • dddd - A day is specified by the date and a full name of the day of the week, for example, 15 Friday.
  • dd or d - A day is specified by the 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.
An order of the specified formats defines an order of the corresponding scroll picker parts.

Date Edit - Read-Only Mode

Date Edit allows you to display the value, but does not allow users to change it. Set the ReadOnly property to true to activate the read-only mode.