Changing the current date’s background color in the Flex DateField control

The following example shows how you can set the background color for the current date in the DateField control in Flex by setting the todayColor style.

If you want to disable the highlighting of the current date, you can set the showToday property to false.

Full code after the jump.

View MXML

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showToday:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="todayColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateField id="dateField"
            showToday="{checkBox.selected}"
            todayColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

Tagged as: showToday, todayColor