How to use the Feathers
DateTimeSpinner component allows the selection of date and time values using a set of
SpinnerList components. It support multiple editing modes to allow users to select only the date, only the time, or both.
First, let's create a
DateTimeSpinner control, set up its editing mode and its range of values, and add it to the display list.
value property indicates the currently selected date and time, while the
maximum properties establish a range of possible values. You may omit the
maximum properties, and reasonable defaults will be chosen automatically.
editingMode property determines how the date and time are displayed.
DateTimeMode.DATEdisplays only the date, without the time. The month and day are displayed in order based on the current locale.
DateTimeMode.TIMEdisplays only the time, without the date. The time is displayed in either 12-hour or 24-hour format based on the current locale.
DateTimeMode.DATE_AND_TIMEdisplays both the date and the time. As with the previous mode, the current locale determines formatting.
Add a listener to the
Event.CHANGE event to know when the
value property changes:
The listener might look something like this:
The skins for a
DateTimeSpinner control are divided into multiple
SpinnerList components. For full details about which properties are available, see the
DateTimeSpinner API reference. We'll look at a few of the most common properties below.
This section only explains how to access the
SpinnerList sub-components. Please read How to use the Feathers
SpinnerList component for full details about the skinning properties that are available on
With a Theme
If you're creating a theme, you can target the
DateTimeSpinner.DEFAULT_CHILD_STYLE_NAME_LIST style name.
The styling function might look like this:
You can override the default style name to use a different one in your theme, if you prefer:
You can set the function for the
customListStyleName like this:
Without a Theme
If you are not using a theme, you can use
listFactory to provide skins for the list sub-components: