Date Editor Elements
- 4 minutes to read
The ASPxDateEdit control displays a text box with a drop-down button.
You can use control-level properties to control the text box appearance. Use the ASPxDropDownEditBase.DropDownButton property to customize the button.
Click the drop-down button to display the drop-down window. If you set the ASPxDropDownEditBase.ShowShadow property to true, this window can cast a shadow.
The drop-down window consists of two sections: the calendar section (always visible) and the time section (with visibility controlled by the DateEditTimeSectionProperties.Visible property). For more information, see the section descriptions.
Click the current month and year in the calendar header to display the Fast Navigation Window.
Concepts
Calendar Section
A Calendar section is an embedded calendar control displayed within the ASPxDateEdit drop-down window. You can use the ASPxDateEdit.CalendarProperties property to access calendar settings.
The Calendar section is always visible in the drop-down window. You can also enable the Time Section. The editor displays the fast navigation window when users click the current month and year in a calendar header.
The table below lists the main properties that affect calendar elements.
| Visual element | Members |
|---|---|
| Clear Button | CalendarProperties.ShowClearButton, CalendarProperties.ClearButtonText, CalendarProperties.ButtonStyle |
| Day Headers | CalendarProperties.ShowDayHeaders, CalendarProperties.DayNameFormat, CalendarProperties.DayHeaderStyle |
| Footer | CalendarProperties.FooterStyle |
| Header | CalendarProperties.ShowHeader, CalendarProperties.HeaderStyle |
| Month Navigation Buttons | CalendarProperties.EnablePeriodNavigation, CalendarProperties.NextPeriodImage, CalendarProperties.PrevPeriodImage |
| Today | CalendarProperties.TodayStyle |
| Today Button | CalendarProperties.ShowTodayButton, CalendarProperties.TodayButtonText, CalendarProperties.ButtonStyle |
| Week Numbers | CalendarProperties.ShowWeekNumbers |
| Year Navigation Buttons | CalendarProperties.EnableLargePeriodNavigation, CalendarProperties.NextLargePeriodImage, CalendarProperties.PrevLargePeriodImage |
Keyboard Support
| Key Combination | Action (when no date is selected) | Action (when a date is selected) |
|---|---|---|
| LEFT ARROW | Selects the current day | Moves selection to the previous day |
| RIGHT ARROW | Selects the current day | Moves selection to the next day |
| UP ARROW | Selects the current day | Moves selection one week back |
| DOWN ARROW | Selects the current day | Moves selection one week forward |
| PAGE UP | Selects the current day | Moves selection one month back |
| PAGE DOWN | Selects the current day | Moves selection one month forward |
| END | Selects the last day of the current month | Moves selection to the last day of the month |
| HOME | Selects the first day of the current month | Moves selection to the first day of the month |
| ENTER | Applies changes | Applies changes |
| ESC | Cancels changes and closes the calendar | Cancels changes and closes the calendar |
Time Section
The ASPxDateEdit drop-down window displays a Time section if the DateEditTimeSectionProperties.Visible property is set to true. Use the ASPxDateEdit.TimeSectionProperties property to access the section settings.
The table below lists the main properties that affect the time section elements. To customize the header and footer, use the calendar section properties.
Fast Navigation Window
Click the current month and year in the calendar section and set the CalendarFastNavProperties.Enabled property to true to display the Fast Navigation Window. To access its setting, use the CalendarProperties.FastNavStyle property.
The table below lists the main properties that affect the calendar elements.
| Visual element | Members |
|---|---|
| Cancel Button | CalendarFastNavProperties.CancelButtonText, CalendarProperties.ButtonStyle |
| Footer | CalendarProperties.FastNavFooterStyle |
| Month | CalendarProperties.FastNavMonthStyle |
| Month Area | CalendarProperties.FastNavMonthAreaStyle |
| Next Year Button | CalendarProperties.FastNavNextYearImage |
| Ok Button | CalendarFastNavProperties.OkButtonText, CalendarProperties.ButtonStyle |
| Previous Year Button | CalendarProperties.FastNavPrevYearImage |
| Year | CalendarProperties.FastNavYearStyle |
| Year Area | CalendarProperties.FastNavYearAreaStyle |
Keyboard Support
| Key Combination | Action |
|---|---|
| LEFT ARROW | Moves the selected year one year back |
| RIGHT ARROW | Moves the selected year one year forward |
| UP ARROW | Moves the selected year five years back |
| DOWN ARROW | Moves the selected year five years forward |
| SHIFT+LEFT ARROW | Moves the selected month one month back |
| SHIFT+RIGHT ARROW | Moves the selected month one month forward |
| SHIFT+UP ARROW | Moves the selected month four months back |
| SHIFT+DOWN ARROW | Moves the selected month four months forward |
| PAGE UP | Moves the selected year ten years back |
| PAGE DOWN | Moves the selected year ten years forward |
| ENTER | Applies changes |
| ESC | Cancels changes and closes the Fast Navigation Window |