Flex Examples » dayNamesLong http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Using the DateBase class in Flex http://blog.flexexamples.com/2007/12/11/using-the-datebase-class-in-flex/ http://blog.flexexamples.com/2007/12/11/using-the-datebase-class-in-flex/#comments Wed, 12 Dec 2007 06:53:00 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/11/using-the-datebase-class-in-flex/ 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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2007/12/11/using-the-datebase-class-in-flex/feed/ 2 Setting the DateChooser control’s dayNames property and firstDayOfWeek property http://blog.flexexamples.com/2007/08/23/setting-the-datechooser-controls-daynames-property-and-firstdayofweek-property/ http://blog.flexexamples.com/2007/08/23/setting-the-datechooser-controls-daynames-property-and-firstdayofweek-property/#comments Fri, 24 Aug 2007 05:59:18 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/23/setting-the-datechooser-controls-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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2007/08/23/setting-the-datechooser-controls-daynames-property-and-firstdayofweek-property/feed/ 0