Changing the background color of the nested calendar in a Flex DateField control

The following example shows how you can change the background color and text color of the DateField control’s nested DateChooser component.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/18/changing-the-background-color-of-the-nested-calendar-in-a-flex-datefield-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        .subDateChooser {
            backgroundColor: black;
            color: white;
        }
    </mx:Style>

    <mx:DateField id="dateField"
            dateChooserStyleName="subDateChooser" />

</mx:Application>

View source is enabled in the following example.

Tagged as: dateChooserStyleName