Setting the DateChooser control’s dayNames property and firstDayOfWeek property

This is kind of silly, but I was looking through the DateBase class today and figured “why not?”. This example takes a quick look at setting the DateChooser control’s dayNames property and switching between the default values (“S”, “M”, “T”, …, “S”) with the longer versions such as “Sun”, “Mon”, “Tue”, …, “Sat”, and the longer/sillier still “Sunday”, “Monday”, “Tuesday”, …, “Saturday”.

The one interesting thing to note in this example though, is even though you can change the firstDayOfWeek property to control the day first of the week that the calendar starts on, the dayNames array should always start with Sunday.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/23/setting-the-datechooser-controls-daynames-property-and-firstdayofweek-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

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

            [Bindable]
            private var dayNamesDefaultArr:Array;

            [Bindable]
            private var dayNamesShortArr:Array = DateBase.dayNamesShort;

            [Bindable]
            private var dayNamesLongArr:Array = DateBase.dayNamesLong;

            private function init():void {
                dayNamesDefaultArr = dateChooser.dayNames;
            }

            private function slider_dataTipFormatFunc(item:Object):String {
                return dateChooser.dayNames[slider.value];
            }
        ]]>
    </mx:Script>

    <mx:Array id="dayNamesArr"></mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="dayNames:" />
        <mx:ComboBox id="comboBox"
                change="dateChooser.dayNames = comboBox.selectedItem.data">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="default" data="{dayNamesDefaultArr}" />
                    <mx:Object label="short" data="{dayNamesShortArr}" />
                    <mx:Object label="long" data="{dayNamesLongArr}" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>

        <mx:Spacer width="100%" />

        <mx:Label text="firstDayOfWeek:" />
        <mx:HSlider id="slider"
                minimum="0"
                maximum="6"
                liveDragging="true"
                snapInterval="1"
                dataTipFormatFunction="slider_dataTipFormatFunc" />
    </mx:ApplicationControlBar>

    <mx:DateChooser id="dateChooser" firstDayOfWeek="{slider.value}" />

    <mx:Label text="{dateChooser.dayNames.join(', ')}" />

</mx:Application>

View source is enabled in the following example.