Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›UI Components

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Command line terminal
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Android
    • Electron
    • HashLink VM
    • iOS
    • Linux
    • macOS
    • Neko VM
    • Web
    • Windows
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • Alert
  • Application
  • AssetLoader
  • Button
  • ButtonBar
  • Callout
  • Check
  • ComboBox
  • DatePicker
  • HDividedBox / VDividedBox
  • Drawer
  • Form / FormItem
  • GridView
  • GroupListView
  • Header
  • HierarchicalItemRenderer
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • NumericStepper
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpDatePicker
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeGridView
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • FlowRowsLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • TiledRowsLayout
  • TiledRowsListLayout
  • PagedTiledRowsListLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout
  • Layout Data
  • Custom layouts

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Animation

  • Navigator animated transitions
  • Custom navigator transitions

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • Focus management
  • haxedef options
  • Displaying pop-ups
  • Semantic versioning
  • Tool-tips
  • Cookbook
  • Install Prerelease Builds
Edit

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.

  • DatePicker.CHILD_VARIANT_DECREMENT_MONTH_BUTTON
  • DatePicker.CHILD_VARIANT_INCREMENT_MONTH_BUTTON
  • DatePicker.CHILD_VARIANT_DECREMENT_YEAR_BUTTON
  • DatePicker.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.

  • decrementMonthButtonFactory
  • incrementMonthButtonFactory
  • decrementYearButtonFactory
  • incrementYearButtonFactory
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;
});

Related Links

  • feathers.controls.DatePicker API Reference
  • How to use the PopUpDatePicker component
Last updated on 3/21/2022
← ComboBoxHDividedBox / VDividedBox →
  • The Basics
  • Styles
    • Month title view
    • Buttons
    • Date renderers
  • Related Links
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Premium Support
Documentation
  • Getting Started
  • API Reference
  • Samples
    Github
  • Source Code
  • Issue Tracker
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2022 Bowler Hat LLC — Illustrations by unDraw.