Customizing the current date in a Flex DateField control

The following example shows how you can customize the current date in a DateField control in Flex by setting a custom skin behind the current date using the todayIndicatorSkin style, as well as setting the todayStyleName style to set various text formats, such as text color and font weight.

Full code after the jump.

View MXML

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

    <mx:Style>
        DateField {
            dateChooserStyleName: myDateChooser;
        }

        .myDateChooser {
            todayIndicatorSkin: Embed("star.png");
            todayStyleName: myToday;
        }

        .myToday {
            color: black;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:DateField id="dateField" />

</mx:Application>

View source is enabled in the following example.

Tagged as: todayIndicatorSkin, todayStyleName