Back to Devexpress

Date Editor Elements

aspnet-12319-components-data-editors-aspxdateedit-visual-elements.md

latest10.2 KB
Original Source

Date Editor Elements

  • Jun 16, 2022
  • 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 elementMembers
Clear ButtonCalendarProperties.ShowClearButton, CalendarProperties.ClearButtonText, CalendarProperties.ButtonStyle
Day HeadersCalendarProperties.ShowDayHeaders, CalendarProperties.DayNameFormat, CalendarProperties.DayHeaderStyle
FooterCalendarProperties.FooterStyle
HeaderCalendarProperties.ShowHeader, CalendarProperties.HeaderStyle
Month Navigation ButtonsCalendarProperties.EnablePeriodNavigation, CalendarProperties.NextPeriodImage, CalendarProperties.PrevPeriodImage
TodayCalendarProperties.TodayStyle
Today ButtonCalendarProperties.ShowTodayButton, CalendarProperties.TodayButtonText, CalendarProperties.ButtonStyle
Week NumbersCalendarProperties.ShowWeekNumbers
Year Navigation ButtonsCalendarProperties.EnableLargePeriodNavigation, CalendarProperties.NextLargePeriodImage, CalendarProperties.PrevLargePeriodImage

Keyboard Support

Key CombinationAction (when no date is selected)Action (when a date is selected)
LEFT ARROWSelects the current dayMoves selection to the previous day
RIGHT ARROWSelects the current dayMoves selection to the next day
UP ARROWSelects the current dayMoves selection one week back
DOWN ARROWSelects the current dayMoves selection one week forward
PAGE UPSelects the current dayMoves selection one month back
PAGE DOWNSelects the current dayMoves selection one month forward
ENDSelects the last day of the current monthMoves selection to the last day of the month
HOMESelects the first day of the current monthMoves selection to the first day of the month
ENTERApplies changesApplies changes
ESCCancels changes and closes the calendarCancels 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.

Visual elementMembers
Cancel ButtonDateEditTimeSectionProperties.ShowCancelButton, DateEditTimeSectionProperties.CancelButtonText
ClockFaceDateEditTimeSectionProperties.ClockFaceImage
Clock CellDateEditTimeSectionProperties.ClockCellStyle
FooterCalendarProperties.FooterStyle
HeaderCalendarProperties.HeaderStyle
Hour HandDateEditTimeSectionProperties.ShowHourHand, DateEditTimeSectionProperties.HourHandImage
Minute HandDateEditTimeSectionProperties.ShowMinuteHand, DateEditTimeSectionProperties.MinuteHandImage
Ok ButtonDateEditTimeSectionProperties.ShowOkButton, DateEditTimeSectionProperties.OkButtonText
Second HandDateEditTimeSectionProperties.ShowSecondHand, DateEditTimeSectionProperties.SecondHandImage
Time EditDateEditTimeSectionProperties.TimeEditProperties
Time Edit CellDateEditTimeSectionProperties.TimeEditCellStyle

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 elementMembers
Cancel ButtonCalendarFastNavProperties.CancelButtonText, CalendarProperties.ButtonStyle
FooterCalendarProperties.FastNavFooterStyle
MonthCalendarProperties.FastNavMonthStyle
Month AreaCalendarProperties.FastNavMonthAreaStyle
Next Year ButtonCalendarProperties.FastNavNextYearImage
Ok ButtonCalendarFastNavProperties.OkButtonText, CalendarProperties.ButtonStyle
Previous Year ButtonCalendarProperties.FastNavPrevYearImage
YearCalendarProperties.FastNavYearStyle
Year AreaCalendarProperties.FastNavYearAreaStyle

Keyboard Support

Key CombinationAction
LEFT ARROWMoves the selected year one year back
RIGHT ARROWMoves the selected year one year forward
UP ARROWMoves the selected year five years back
DOWN ARROWMoves the selected year five years forward
SHIFT+LEFT ARROWMoves the selected month one month back
SHIFT+RIGHT ARROWMoves the selected month one month forward
SHIFT+UP ARROWMoves the selected month four months back
SHIFT+DOWN ARROWMoves the selected month four months forward
PAGE UPMoves the selected year ten years back
PAGE DOWNMoves the selected year ten years forward
ENTERApplies changes
ESCCancels changes and closes the Fast Navigation Window