Adobe Flex – Format Date & Time (inside of a DataGrid too)
Posted on : 01-04-2009 | By : Michael Fitchett | In : ActionScript, Development, Flex
9
This is probably one of the easier things to do in Flex. Yea you could probably find out how to do this by reading the Adobe Flex Documentation but who wants to read that when you have Google at your fingertips.
What the Adobe Flex Documentation wont tell you is how to format your date and time inside of a DataGrid or other components. No worries I do!
Here is how you format a date pulled in as XML, E4X or whatever…
First you will need a DateFormatter
<mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />
the formatString will determine how your date & time is formatted. I have created a pattern chart below that’s a little easier to read then the one on Adobe’s Flex Documentation.
| Pattern | Example |
| Year | |
| YY | 09 (Year Number Short) |
| YYY | 2009 (Year Number Full) |
| YYYY | 02009 (I have no clue why you would need this) |
| Month | |
| M | 7 (Month Number Short) |
| MM | 07 (Month Number Full) |
| MMM | Jul (Month Name Short) |
| MMMM | July (Month Name Full) |
| Day | |
| D | 4 (Day Number Short) |
| DD | 04 (Day Number Full) |
| Day Name | |
| E | 1 (Day Number Short) |
| EE | 01 (Day Number Full) |
| EEE | Mon (Day Name Short) |
| EEEE | Monday (Day Name Full) |
| A | AM/PM |
| J | Hour in day (0-23) |
| H | Hour in day (1-24) |
| K | Hour in AM/PM (0-11) |
| L | Hour in AM/PM(1-12) |
| N | 3 (Minutes) |
| NN | 03 (Minutes) |
| SS | 30 (Seconds) |
OK now on to applying it to a date with funky database formatting
formatDateTime.format(yourDateTimeObjectAsString);
For playing around purposes I created an example in Flex, change the pattern to alter the date and time
Almost forgot!, To use the format inside of a DataGrid you need to add
<mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />
to your DataGrid inside of a VBox or HBox along with your label so it looks something like this
<mx:DataGridColumn headerText="Date">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />
<mx:Label text="{formatDateTime.format(data.myDate) }/>











Hi Michael,
thanks a lot for this article. This helped me a lot…
expecting a lot more articles about flex from you…
thanks again…
Tks Dude
Nice example
Thanks alot !
Thanks much, thanks for simplifying.
thanks for the tip!
nice site btw!
This works perfect. Thanks for the solution.
Is there a way to set the Month or Day names of a DateFormatter Object for multi language purposes?
Not sure if the Flex 3 SDK supports multi-language off the bat but one way of doing it would be to do a string find and replace.
You would need to write a function for all the months and days.
Quick example of a replace (not tested).
I think the latest version of Flex “Flash Builder 4″ supports multi-language you may want to look through the new SDK.
When i use this example, i can no longer sort by the date. Do you know of any workaround to enable the sort feature?