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.
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.
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.
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.
- 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.