Changing the header colors of a Flex DateChooser control

The following example shows how you can customize the background color of the DateChooser control’s header in Flex by setting the headerColors style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/25/changing-the-header-colors-of-a-flex-datechooser-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="headerColors:" direction="horizontal">
                <mx:ColorPicker id="c1" />
                <mx:ColorPicker id="c2" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateChooser id="dateChooser"
            headerColors="{[c1.selectedColor, c2.selectedColor]}" />

</mx:Application>

View source is enabled in the following example.

You can set the DateChooser control’s headerColors style in MXML using the following snippet:

<mx:DateChooser id="dateChooser" headerColors="[red, white]" />

Or, using hexadecimal colors such as #FF0000 or 0xFF0000:

<mx:DateChooser id="dateChooser" headerColors="[#FF0000, 0xFFFFFF]" />

Or, you can set the headerColors style using CSS:

<mx:Style>
    DateChooser {
        headerColors: red, #FFFFFF;
    }
</mx:Style>

Finally, you can set the headerColor style using ActionScript:

dateChooser.setStyle("headerColors", ["haloOrange", 0xFFFFFF]);

Tagged as: headerColors