How to use the DatePicker component
The DatePicker class displays a month calendar view, with buttons to change the current month and year, and a specific date may be selected by the user.
DatePicker component⚠️ Beta Notice: This component is still quite new to Feathers UI. It was included in the latest release because it should be stable enough for production use. However, some APIs may go through minor changes in upcoming releases — based on feedback from developers like you. Learn more about Beta APIs.
The Basics
Start by creating a DatePicker control, and add it to the display list.
var datePicker = new DatePicker();
addChild(datePicker);
Add an event listener for Event.CHANGE to perform an action when the user selects a different tab.
datePicker.addEventListener(Event.CHANGE, datePicker_changeHandler);
Check for the new value of the selectedDate property in the listener.
function datePicker_changeHandler(event:Event):Void {
var datePicker = cast(event.currentTarget, DatePicker);
trace("DatePicker selectedDate change: " + datePicker.selectedDate);
}
Styles
A number of styles may be customized on the sub-components of a DatePicker component, including styles on the title view, buttons, weekday labels, and date renderers.
Month title view
The month title view in a DatePicker component is of type Label. Its appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual DatePicker.
See How to use the
Labelcomponent for complete details about which styles are available for the title.
Style month title view globally
Use the DatePicker.CHILD_VARIANT_MONTH_TITLE_VIEW constant in a theme to provide a function that globally styles the buttons in all DatePicker components.
styleProvider.setStyleFunction(
Label,
DatePicker.CHILD_VARIANT_MONTH_TITLE_VIEW,
setDatePicker_MonthTitleView_Styles);
The function should use the following signature.
function setDatePicker_MonthTitleView_Styles(view:Label):Void {
// ... set styles here
}
Style the month title view in a specific DatePicker
The monthTitleViewFactory property may be used to customize the creation of an individual button.
datePicker.monthTitleViewFactory = () -> {
var titleView = new Label();
// ... set styles here
return titleView;
};
Buttons
The buttons in a DatePicker component are of type Button. Their appearance may be customized globally in a theme, or they may be customized outside of a theme on an specific, individual DatePicker.
See How to use the
Buttoncomponent for complete details about which styles are available for the buttons.
Style buttons globally
Each button has a variant constant that may be used in a theme to provide a function that globally styles the buttons in all DatePicker components.
DatePicker.CHILD_VARIANT_DECREMENT_MONTH_BUTTONDatePicker.CHILD_VARIANT_INCREMENT_MONTH_BUTTONDatePicker.CHILD_VARIANT_DECREMENT_YEAR_BUTTONDatePicker.CHILD_VARIANT_INCREMENT_YEAR_BUTTON
styleProvider.setStyleFunction(
Button,
DatePicker.CHILD_VARIANT_DECREMENT_MONTH_BUTTON,
setDatePicker_DecrementMonthButton_Styles);
The function should use the following signature.
function setDatePicker_DecrementMonthButton_Styles(button:Button):Void {
// ... set styles here
}
Style the buttons in a specific DatePicker
Each button has a factory property may be used to customize the creation of an individual button.
decrementMonthButtonFactoryincrementMonthButtonFactorydecrementYearButtonFactoryincrementYearButtonFactory
datePicker.decrementMonthButtonFactory = () -> {
var button = new Button();
// ... set styles here
return button;
};
Date renderers
By default, the date renderers in a DatePicker component is of type ItemRenderer. Their appearance may be customized globally in a theme, or they may be customized outside of a theme on an specific, individual DatePicker.
See How to use the
ItemRenderercomponent for complete details about which styles are available for the item renderer.
Through the
dateRendererRecyclerproperty, it's possible to create date renderers from a different component. The code will need some minor modifications to style a different component.
Style month title view globally
Use the DatePicker.CHILD_VARIANT_DATE_RENDERER constant in a theme to provide a function that globally styles the date renderers in all DatePicker components.
styleProvider.setStyleFunction(
ItemRenderer,
DatePicker.CHILD_VARIANT_DATE_RENDERER,
setDatePicker_DateRenderer_Styles);
The function should use the following signature.
function setDatePicker_DateRenderer_Styles(view:ItemRenderer):Void {
// ... set styles here
}
Style the date renderers in a specific DatePicker
The dateRendererRecycler property may be used to customize the creation of an individual date renderer.
datePicker.dateRendererRecycler = DisplayObjectRecycler.withFunction(() -> {
var dateRenderer = new ItemRenderer();
// ... set styles here
return dateRenderer;
});