DatePicker

Overview

The DatePicker component is a datepicker that conforms in appearance and functionality more closely to those of desktop calendar clients than the default Flex SDK DateChooser.

It also allows for more robust customization, particularity in regards to its appearance due to skinning and custom item renderers.

Creating the DatePicker Component

The DatePicker component extends the Flex SkinnableComponent class and it can be added to any container that implements IVisualElementContainer.

Using the DatePicker Component

Users can select a day via clicking a day number item renderer or keyboard interaction. The selected date can be retrieved via the "selectedDate" property. The selectedDate Date object's time is scrubbed, meaning that only the day, month, and year data is available on the Date object.

Setting the Displayed Month

Set the "displayedMonth" property with a Date object that defines the month you want to display. E.G. for September, September 1, 2020 and September 21, 2020, Date objects would both register the displayedMonth as September, 2020.

Setting the First Day of the Week

Set the "firstDayOfWeek" property. 0 = Sunday... 6 = Saturday.

Setting An Optional Highlighted Date Range

The "highlightedDateRange" property defines the beginning and end dates for a date range that should be highlighted or displayed differently.

Useful to style dates differently when they are displayed in a calendar, selected in a different component, or contextually relevant.

Item Renderers

The renderers for the day numbers and day names are skin parts and are defined in the skin. The day numbers renderers implement ardisia.scheduling.datePicker.interfaces.IDayNumbersRenderer and the day names renderers implement ardisia.scheduling.datePicker.interfaces.IDayNamesRenderer.

Accessibility

Field can be tabbed to and the "selectedDate" can be changed via keyboard interaction.

Selected Custom Events

MONTH_CHANGE
ardisia.scheduling.datePicker.events.DatePickerEvent
Dispatched when the currently displayed month changes.

SELECTED_DATE_CHANGE
ardisia.scheduling.datePicker.events.DatePickerEvent
Dispatched when the selected date changes.

Selected Custom Styles

borderColor
default defaults.css
The color of the border.

borderAlpha
default 1
The alpha of the border.

borderVisible
default true
True to display a border.

Themes & Skinning

Skins are provided for the Spark, Stockholm, and London themes.

Example

See the DatePicker demo application for example code.

Back To Top