Adobe Flex – Format Date & Time (inside of a DataGrid too)
Posted on : 01-04-2009 | By : Michael Fitchett | In : ActionScript, Development, Flex
21
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?
when i write formatDate.format it gives me blank result
m i missing anything
i got it formatDate.format(data.mydata.toString())
but how to do all these things in Flex 4
What’s the problem?
Using FB4. I am getting an error the the element type ‘mx:VBox’ must be terminated by the matching end-tage .
Do I have to add a termination? I am wondering why you left it out – maybe it is not needed.
thanks.
also … shouldn’t the last line look like this –
I think you left out the ” at the end?
i added terminators for itemrenderer, component, vbox; and the error I get is “Could not resolve to a component implementation.
my client want output to be shown like
formatString = “Date : DD, Month : MM , Year: YYYY”
then in this case dateformatter wont work.
example 7.30.2010
output looks like
30ate: 30, 7onth: 07, 10ear: 2010.
Is there anyway to solve the problem
thanks in advance
isnt this easier?
private function formatmydate(item:Object, column:DataGridColumn):String
{
return RQformater.format(item.Est_start);
}
In the datagrid
instead of datafeild=”Est_start”
remeber to add this….
Sorry, but posting here wasnt easy, cuts of the code
can we have the sourceCode for your example?
I am a newbie to flex and i need a help, when i read data from database (when i test it directly invokeingweb service and also thru flex Data/Services test operation)i have a column named Datastarted it reads as “2011-01-06T00:00:00-06:00″
but when it reaches to flex using “readCalenderResult.token = dataservices.readCalender(ProjID);” readCalender is the web service method, date format changes to “Thu Jan 6 00:00:00 GMT-0600 2011″
which makes it unable to compare 2 dates.Don’t know why it happening, any help would be really apppreciated.This is the error message i am getting
“TypeError: Error #1034: Type Coercion failed: cannot convert “Thu Jan 6 00:00:00 GMT-0600 2011″ to Date.”
I am complete new to flex. I want to know how to get the difference between 2 dates in minutes