Flex Examples

We’ve looked briefly at the DateBase class before, “Setting the DateChooser control’s dayNames property and firstDayOfWeek property”, but considering how often dates/calendars come up in Flex, it is always good to remind people that they don’t need to reinvent the wheel (or date constants, as the case may be).

The following examples shows how you can use the various static properties in the DateBase class (shown below) to populate ComboBox controls (or any other control with a data provider).

• dayNamesShort — “Sun”, …, “Sat”
• dayNamesLong — “Sunday”, …, “Saturday”
• monthNamesShort — “Jan”, …, “Dec”
• monthNamesLong — “January”, …, “December”
• timeOfDay — “AM”, “PM”

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/11/using-the-datebase-class-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.formatters.DateBase;

            private function init():void {
                comboBox1.dataProvider = new ArrayCollection(DateBase.dayNamesShort);
                comboBox2.dataProvider = new ArrayCollection(DateBase.dayNamesLong);
                comboBox3.dataProvider = new ArrayCollection(DateBase.monthNamesShort);
                comboBox4.dataProvider = new ArrayCollection(DateBase.monthNamesLong);
                comboBox5.dataProvider = new ArrayCollection(DateBase.timeOfDay);
            }
        ]]>
    </mx:Script>

    <mx:Form creationComplete="init();">
        <mx:FormItem label="DateBase.dayNamesShort:">
            <mx:ComboBox id="comboBox1" />
        </mx:FormItem>
        <mx:FormItem label="DateBase.dayNamesLong:">
            <mx:ComboBox id="comboBox2" />
        </mx:FormItem>
        <mx:FormItem label="DateBase.monthNamesShort:">
            <mx:ComboBox id="comboBox3" />
        </mx:FormItem>
        <mx:FormItem label="DateBase.monthNamesLong:">
            <mx:ComboBox id="comboBox4" />
        </mx:FormItem>
        <mx:FormItem label="DateBase.timeOfDay:">
            <mx:ComboBox id="comboBox5" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

Also, remember that each of these values are read-write, so if you want to localize the values to other languages, you can easily pass a new Array and overwrite the old values, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/11/using-the-datebase-class-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.formatters.DateBase;

            DateBase.monthNamesLong = ["janvier",
                                        "février",
                                        "mars",
                                        "avril",
                                        "mai",
                                        "juin",
                                        "juillet",
                                        "août",
                                        "septembre",
                                        "octobre",
                                        "novembre",
                                        "décembre"];
            DateBase.dayNamesLong = ["dimanche",
                                        "lundi",
                                        "mardi",
                                        "mercredi",
                                        "jeudi",
                                        "vendredi",
                                        "samedi"];

            private function init():void {
                dateChooser.selectedDate = new Date();
                dateChooser.monthNames = DateBase.monthNamesLong;
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormatter"
            formatString="EEEE MMMM-DD-YYYY" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="lbl"
                text="{dateFormatter.format(dateChooser.selectedDate)}"
                textAlign="center"
                fontSize="24"
                selectable="true"
                width="100%" />
    </mx:ApplicationControlBar>

    <mx:DateChooser id="dateChooser"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.