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.

Live preview of the 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 Label component 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 Button component 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.

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.

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 ItemRenderer component for complete details about which styles are available for the item renderer.

Through the dateRendererRecycler property, 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;
});