How to use the PopUpDatePicker component

The PopUpDatePicker class displays a text input and a button, that when triggered, renders calendar view in a pop-up date picker.

Live preview of the PopUpDatePicker 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 PopUpDatePicker control, and add it to the display list.

var popUpDatePicker = new PopUpDatePicker();
addChild(popUpDatePicker);

Add an event listener for Event.CHANGE to perform an action when the user selects a different tab.

popUpDatePicker.addEventListener(Event.CHANGE, popUpDatePicker_changeHandler);

Check for the new value of the selectedDate property in the listener.

function popUpDatePicker_changeHandler(event:Event):Void {
    var popUpDatePicker = cast(event.currentTarget, PopUpDatePicker);
    trace("PopUpDatePicker selectedDate change: " + popUpDatePicker.selectedDate);
}

Styles

A number of styles may be customized on the sub-components of a PopUpDatePicker component, including styles on the button and the date picker.

Button

The button in a PopUpDatePicker component is of type Button. Its appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual PopUpDatePicker.

See How to use the Button component for complete details about which styles are available for the button.

Style button globally

Use the PopUpDatePicker.CHILD_VARIANT_BUTTON constant in a theme to provide a function that globally styles the buttons in all PopUpDatePicker components.

styleProvider.setStyleFunction(
    Button,
    PopUpDatePicker.CHILD_VARIANT_BUTTON,
    setPopUpDatePicker_Button_Styles);

The function should use the following signature.

function setPopUpDatePicker_Button_Styles(button:Button):Void {
    // ... set styles here
}

Style the button in a specific `PopUpDatePicker`

The buttonFactory property may be used to customize the creation of an individual button.

popUpDatePicker.buttonFactory = () -> {
    var button = new Button();
    // ... set styles here
    return button;
};

Date Picker

The date picker in a PopUpDatePicker component is of type DatePicker. Its appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual PopUpDatePicker.

See How to use the DatePicker component for complete details about which styles are available for the date picker.

Style date picker globally

Use the PopUpDatePicker.CHILD_VARIANT_DATE_PICKER constant in a theme to provide a function that globally styles the date pickers in all PopUpDatePicker components.

styleProvider.setStyleFunction(
    DatePicker,
    PopUpDatePicker.CHILD_VARIANT_DATE_PICKER,
    setPopUpDatePicker_DatePicker_Styles);

The function should use the following signature.

function setPopUpDatePicker_DatePicker_Styles(datePicker:DatePicker):Void {
    // ... set styles here
}

Style the date picker in a specific `PopUpDatePicker`

The datePickerFactory property may be used to customize the creation of an individual DatePicker.

popUpDatePicker.datePickerFactory = () -> {
    var datePicker = new DatePicker();
    // ... set styles here
    return datePicker;
};