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