Flex Examples » Date

Parsing dates with timezones in Flex

Peter deHaan — Mon, 27 Jul 2009 20:04:14 +0000

In a previous example, “Parsing ISO dates with Flex and ActionScript”, we saw how to parse ISO formatted dates (2008-01-25T06:14:23Z) and convert them into an ActionScript 3.0 Date object.

The following example shows how you can convert a Java formatted date (Wed Jul 22 14:29:30 PST 2009) and convert the timezone into an ActionScript 3.0 friendly format (UTC-0700) so you can use the static Date.parse() method to convert them into an ActionScript 3.0 Date object.

Full code after the jump.

"1.0" encoding="utf-8"?>

 name="Date_parse_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            private const datStr1:String = "Wed Jul 22 14:29:30 PST 2009";
            private const datStr2:String = "Wed Jul 22 14:29:30 EDT 2009";
 
            private var timeZones:Array = [
                /* Hawaii-Aleutian Standard/Daylight Time */
                {abbr:"HAST", zone:"UTC-1000"},
                {abbr:"HADT", zone:"UTC-0900"},
                /* Alaska Standard/Daylight Time */
                {abbr:"AKST", zone:"UTC-0900"},
                {abbr:"ASDT", zone:"UTC-0800"},
                /* Pacific Standard/Daylight Time */
                {abbr:"PST", zone:"UTC-0800"},
                {abbr:"PDT", zone:"UTC-0700"},
                /* Mountain Standard/Daylight Time */
                {abbr:"MST", zone:"UTC-0700"},
                {abbr:"MDT", zone:"UTC-0600"},
                /* Central Standard/Daylight Time */
                {abbr:"CST", zone:"UTC-0600"},
                {abbr:"CDT", zone:"UTC-0500"},
                /* Eastern Standard/Daylight Time */
                {abbr:"EST", zone:"UTC-0500"},
                {abbr:"EDT", zone:"UTC-0400"},
                /* Atlantic Standard/Daylight Time */
                {abbr:"AST", zone:"UTC-0400"},
                {abbr:"ADT", zone:"UTC-0300"},
                /* Newfoundland Standard/Daylight Time */
                {abbr:"NST", zone:"UTC-0330"},
                {abbr:"NDT", zone:"UTC-0230"}
            ];
 
            private function simpleDateParser(value:String):Date {
                var dat:String = value;
                if (isNaN(Date.parse(dat))) {
                    var idx:uint;
                    var len:uint = timeZones.length
                    var obj:Object;
                    for (idx=0; idx
                        obj = timeZones[idx];
                        if (dat.indexOf(obj.abbr) > -1) {
                            dat = dat.replace(obj.abbr, obj.zone);
                            return new Date(Date.parse(dat));
                        }
                    }
                }
                // TimeZone not found, or conversion not needed.
                return new Date(Date.parse(dat));
            }
        ]]>
    
 
    >
         text="{datStr1}" fontWeight="bold" />
         initialize="event.currentTarget.text = simpleDateParser(datStr1);" />
         width="100%" />
         text="{datStr2}" fontWeight="bold" />
         initialize="event.currentTarget.text = simpleDateParser(datStr2);" />
    >
 
>

Parsing ISO dates with Flex and ActionScript

Peter deHaan — Sat, 02 Feb 2008 20:41:46 +0000

The following example shows how you can parse an ISO format date (for more information, see http://www.w3.org/TR/NOTE-datetime) and convert it into a Date object in ActionScript using the String class’s replace() method and the static Date.parse() method.

Full code after the jump.

View MXML

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    
        
            [Bindable]
            private var d:Date;
 
            private function init():void {
                var isoStr:String = "2008-01-25T06:14:23Z";
                d = isoToDate(isoStr);
                formHeading.label = isoStr;
            }
 
            private function isoToDate(value:String):Date {
                var dateStr:String = value;
                dateStr = dateStr.replace(/\-/g, "/");
                dateStr = dateStr.replace("T", " ");
                dateStr = dateStr.replace("Z", " GMT-0000");
                return new Date(Date.parse(dateStr));
            }
        ]]>
    
 
    >
         id="formHeading" />
         label="toString():">
             text="{d.toString()}" />
        >
         label="toLocaleString():">
             text="{d.toLocaleString()}" />
        >
         label="toUTCString():">
             text="{d.toUTCString()}" />
        >
    >
 
>

View source is enabled in the following example.

A big thanks to Jon for helping me with the bug in my time-zone conversion.

Date math for lazy people

Peter deHaan — Fri, 24 Aug 2007 18:30:33 +0000

I’ve always hated doing simple date manipulation and having to create wacky variables like “millisecondsPerDay” where you multiply milliseconds by seconds by hours by whatever else. So here’s a useful (and largely untested) function, dateAdd(), which is similar to the function that ColdFusion-ers have enjoyed for years.

Full code (and instructions) after the jump.

In addition to my code being untested, I should point out that the datepart strings are different than those in ColdFusion. Where ColdFusion uses formats such as: “yyyy”, “q”, “m”, “y”, “d”, “w”, etc. I’ve cut corners and used the property names from the Date class (“fullYear”, “month”, “date”, “hours”, “minutes”, “seconds”, “milliseconds”) instead. This let me use:

returnDate[datepart] += number;

Which is basically a shorthand for something like:

returnDate["months"] += 3;

If you wanted to use the ColdFusion type notation it should be easy enough to extend the dateAdd() function and add another simple switch statement which converts the “yyyy” to “fullYear”, and so on.

Using the dateAdd() function is [hopefully] pretty straight forward.

All three parameters are optional. If no parameters are passed, the current date is returned (similar to the Date class constructor).
If only the first parameter (datepart) is passed, the current date is returned.
If the first two parameters (datepart and number) are passed, the function adds the specified number of date parts to the current date. For example, if you called dateAdd("month", 3) the function would return the current date plus 3 months. If you called dateAdd("month", -3) the function would return the current date minus 3 months.
If the first three parameters (datepart, number, and date) are passed, the function adds the specified number of date parts to the specified date. For example, if you called dateAdd("day", 15, calendarStartDate) the function would return the value of the calendarStartDate variable (which must be a Date object) plus 15 days.

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">
 
    
        
            import mx.controls.dataGridClasses.DataGridColumn;
            private function init():void {
                var zeroDate:Date = new Date(0);
 
                /* fullYear */
                arrColl.addItem({label:"+2 years", data:dateAdd("fullYear", 2, zeroDate)});
                arrColl.addItem({label:"-2 years", data:dateAdd("fullYear", -2, zeroDate)});
                /* month */
                arrColl.addItem({label:"+11 months", data:dateAdd("month", 11)});
                arrColl.addItem({label:"-11 months", data:dateAdd("month", -11)});
                /* date */
                arrColl.addItem({label:"+4 date", data:dateAdd("date", 4)});
                arrColl.addItem({label:"-4 date", data:dateAdd("date", -4)});
                /* hours */
                arrColl.addItem({label:"+6 hours", data:dateAdd("hours", 6)});
                arrColl.addItem({label:"-6 hours", data:dateAdd("hours", -6)});
                /* minutes */
                arrColl.addItem({label:"+45 minutes", data:dateAdd("minutes", 45)});
                arrColl.addItem({label:"-45 minutes", data:dateAdd("minutes", -45)});
                /* seconds */
                arrColl.addItem({label:"+900 seconds", data:dateAdd("seconds", 900)});
                arrColl.addItem({label:"-900 seconds", data:dateAdd("seconds", -900)});
                /* milliseconds */
                arrColl.addItem({label:"+720000 milliseconds", data:dateAdd("milliseconds", 720000)});
                arrColl.addItem({label:"-720000 milliseconds", data:dateAdd("milliseconds", -720000)});
            }
 
            private function dateAdd(datepart:String = "", number:Number = 0, date:Date = null):Date {
                if (date == null) {
                    /* Default to current date. */
                    date = new Date();
                }
 
                var returnDate:Date = new Date(date.time);;
 
                switch (datepart.toLowerCase()) {
                    case "fullyear":
                    case "month":
                    case "date":
                    case "hours":
                    case "minutes":
                    case "seconds":
                    case "milliseconds":
                        returnDate[datepart] += number;
                        break;
                    default:
                        /* Unknown date part, do nothing. */
                        break;
                }
                return returnDate;
            }
 
            private function data_labelFunc(item:Object, column:DataGridColumn):String {
                return dateFormatter.format(item[column.dataField]);
            }
        ]]>
    
 
     id="arrColl" />
 
     id="dateFormatter"
            formatString="YYYY/MM/DD HH:NN:SS" />
 
     text="Now: {dateAdd()}" />
     id="dataGrid"
            dataProvider="{arrColl}"
            sortableColumns="false"
            width="400">
        >
             dataField="label"
                    headerText="Label"
                    width="150" />
             dataField="data"
                    headerText="YYYY/MM/DD HH:NN:SS"
                    labelFunction="data_labelFunc" />
        >
    >
 
>

View source is enabled in the following example.

As a bonus tip… I believe you could do this with the Date constructor in ActionScript 2.0 as well, but I always find this handy. The following snippet creates a new Date object for January 45th, 2007. ActionScript cleverly adjusts that for you and returns the date of February 14th, 2007.

const JANUARY:uint = 0;
// ...
const DECEMBER:uint = 11;
 
var d:Date = new Date(2007, JANUARY, 45);
trace(d.toDateString()); // Wed Feb 14 2007

Although DO note that the Date.toDateString() method (as well as uint data type and const keyword) are specific to ActionScript 3.0.

Happy Flexing!

Calculating the number of days between two selected dates in a DateChooser control

Peter deHaan — Wed, 01 Aug 2007 04:54:09 +0000

Here’s a marginally more interesting sample. I was playing around with the DateChooser (calendar) control and the selectableRange property and figured I’d make a simple application to calculate the differences between two selected dates. The example creates a selectable range of dates from the current date to current date plus 1 year. Users can select any single or range of dates between the start date and end date, and Flex calculates the number of days the user selected using some basic math.

"1.0" encoding="utf-8"?>
 name="DateChooser_selectableRange_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            import mx.controls.dataGridClasses.DataGridColumn;
 
            /* Number of milliseconds in a day. (1000 milliseconds per second * 60 seconds per minute * 60 minutes per hour * 24 hours per day) */
            private const MS_PER_DAY:uint = 1000 * 60 * 60 * 24;
 
            [Bindable]
            private var startDate:Date = new Date();
 
            [Bindable]
            private var endDate:Date = new Date(startDate.fullYear + 1, startDate.month, startDate.date);
 
            /* Default label function for the DataGrid. Basically just calls the DateFormatter on the current column's contents. */
            private function cellDateFormatter(item:Object, column:DataGridColumn):String {
                var columnDataField:String = column.dataField;
                return dateFormatter.format(item[columnDataField]);
            }
 
            /* Custom label function for the last column. Calculates the number of days between the start date and end date. */
            private function calculateDays(item:Object, column:DataGridColumn):String {
                var tempDate:Date = new Date(item.rangeEnd - item.rangeStart);
                return Math.round((tempDate.time / MS_PER_DAY) + 1).toString();
            }
        ]]>
    
 
     id="dateFormatter" formatString="MMM D, YYYY" />
 
    >
         id="dateChooser" selectableRange="{{rangeStart:startDate, rangeEnd:endDate}}" allowMultipleSelection="true" />
 
         id="selDates" dataProvider="{dateChooser.selectedRanges}" labelFunction="cellDateFormatter" verticalScrollPolicy="on" height="{dateChooser.height}">
            >
                 dataField="rangeStart" headerText="Range Start:" />
                 dataField="rangeEnd" headerText="Range End:" />
                 labelFunction="calculateDays" headerText="Number Days:" />
            >
        >
    >
 
>

View source enabled in the following example.