DateNavigator 

The DateNavigator UI element enables users to display and enter dates. Its features include the ability to navigate in a calendar and choose a day, month, year, or range of dates. Primarily, this element should be used to help users to input dates in an appropriate format.

You can use the DateNavigatorLegend and the DateNavigatorMarking Element to add a legend for the description of selected data to the DateNavigator UI element. This enables you to provide the user with information on specific data that is assigned to a category. For example, events in the calendar can be highlighted in a different color and each event can be described with agenda, time, and location.

Example of the Visual Display

To enable the development of accessible applications, the accessibilityDescription property is checked during the syntax check if the tooltip property is not set.

The property accessibilityDescription applies to the entire DateNavigator and is read out by the screen readers if the DateNavigator itself is focused on. The tooltip is displayed for each day, except if this day has a marking and this contains a filled tooltip.

 

Runtime Class

CL_WD_DATE_NAVIGATOR

 

Properties in View Designer

Name	Type	Initial Value	Bindable
ID	STRING	(automatic)	No
accessibilityDescription	Translatable text		Yes
enabled	WDY_BOOLEAN	true	Yes
firstDayOfWeek	WDUI_DAY_OF_WEEK	auto	Yes
firstSelectedDate	D		Yes
lastSelectedDate	D		Yes
legendId	STRING		Yes
monthsPerColumn	I	1	Yes
monthsPerRow	I	3	Yes
selectionMode	WDUI_DATE_SELECTION_MODE	single	Yes
startsWith	D		Yes
tooltip	Translatable text		Yes
visible	WDUI_VISIBILITY	visible	Yes

 

Aggregations in View Designer

Name	Cardinality	Type
Legend	0..1	DateNavigatorLegend
Selection	0..1	DateNavigatorMarking

 

Events in View Designer

Name

onDaySelect

onMonthSelect

onStartDateChanged

onWeekSelect

Other properties that can be inherited are defined in the associated higher-level classes. The associated UI elements are:

●        UIElement

●        ViewElement

Dynamic Programming

For dynamic programming, the same properties, events and aggregations are available as in the View Designer. Bear in mind the different spellings.

Dynamic Programming of Properties

View Designer Name	Runtime Name	Type
accessibilityDescription	ACCESSIBILITY_DESCR	WDY_MD_TRANSLATABLE_TEXT
enabled	ENABLED	WDY_BOOLEAN
firstDayOfWeek	FIRST_DAY_OF_WEEK	WDUI_DAY_OF_WEEK
firstDayOfWeek: auto	CL_WD_DATE_NAVIGATOR=>E_FIRST_DAY_OF_WEEK-AUTO
firstDayOfWeek: friday	CL_WD_DATE_NAVIGATOR=>E_FIRST_DAY_OF_WEEK-FRIDAY
firstDayOfWeek: monday	CL_WD_DATE_NAVIGATOR=>E_FIRST_DAY_OF_WEEK-MONDAY
firstDayOfWeek: saturday	CL_WD_DATE_NAVIGATOR=>E_FIRST_DAY_OF_WEEK-SATURDAY
firstDayOfWeek: sunday	CL_WD_DATE_NAVIGATOR=>E_FIRST_DAY_OF_WEEK-SUNDAY
firstDayOfWeek: thursday	CL_WD_DATE_NAVIGATOR=>E_FIRST_DAY_OF_WEEK-THURSDAY
firstDayOfWeek: tuesday	CL_WD_DATE_NAVIGATOR=>E_FIRST_DAY_OF_WEEK-TUESDAY
firstDayOfWeek: wednesday	CL_WD_DATE_NAVIGATOR=>E_FIRST_DAY_OF_WEEK-WEDNESDAY
firstSelectedDate	FIRST_SELECTED_DATE	D
lastSelectedDate	LAST_SELECTED_DATE	D
legendId	LEGEND_ID	STRING
monthsPerColumn	MONTHS_PER_COLUMN	I
monthsPerRow	MONTHS_PER_ROW	I
selectionMode	SELECTION_MODE	WDUI_DATE_SELECTION_MODE
selectionMode: none	CL_WD_DATE_NAVIGATOR=>E_SELECTION_MODE-NONE
selectionMode: range	CL_WD_DATE_NAVIGATOR=>E_SELECTION_MODE-RANGE
selectionMode: single	CL_WD_DATE_NAVIGATOR=>E_SELECTION_MODE-SINGLE
startsWith	STARTS_WITH	D
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_DATE_NAVIGATOR=>E_VISIBLE-NONE
visible: visible	CL_WD_DATE_NAVIGATOR=>E_VISIBLE-VISIBLE

 

Dynamic Programming of Events

View Designer Name	Runtime Name
onDaySelect	ON_DAY_SELECT
onMonthSelect	ON_MONTH_SELECT
onStartDateChanged	ON_START_DATE_CHANGED
onWeekSelect	ON_WEEK_SELECT

 

Dynamic Programming of Aggregations

View Designer Name	Runtime Name	Cardinality
Legend	LEGEND	0..1
Selection	MARKING	0..1

Example

You can find examples of this interface element in the system in the Web Dynpro application WDR_TEST_UI_ELEMENTS, and in the component WDR_TEST_EVENTS in the View DateNavigator.