Featured Posts

Adobe Flex - Filter XML Data using E4X and RegExp Have you ever you wanted to filter your data like you would using the SQL LIKE condition? Well with E4X and RegExp you too can reap the benefits of pattern matching! Here...

Readmore

Flex Assets/File Manager – ASP VBScript - Version... I recently built a JavaScript file manager but I wanted more control and better usability instead of expanding on the JavaScript version I decided to build it using Flex....

Readmore

Getting at your SQL Database using Flex and .NET Web ServicesGetting at your SQL Database using Flex and .NET Web... So you gave up on trying to figure out how you can directly connect Flex to your database like with any server side language and decided to Google the answer. Well by now...

Readmore

Adobe Flex - Filter XML Data using E4X and RegExp Have you ever you wanted to filter your data like you would using the SQL LIKE condition? Well with E4X and RegExp you too can reap the benefits of pattern matching! Here...

Readmore

Fitchett Rss

Adobe Flex – Format Date & Time (inside of a DataGrid too)

Posted on : 01-04-2009 | By : Michael Fitchett | In : ActionScript, Development, Flex

9

flex-format-date-timeThis 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

The Flash plugin is required to view this object.

 

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) }/>
http://www.fitchett.me/wp-content/plugins/sociofluid/images/digg_32.png http://www.fitchett.me/wp-content/plugins/sociofluid/images/delicious_32.png http://www.fitchett.me/wp-content/plugins/sociofluid/images/technorati_32.png http://www.fitchett.me/wp-content/plugins/sociofluid/images/google_32.png http://www.fitchett.me/wp-content/plugins/sociofluid/images/myspace_32.png http://www.fitchett.me/wp-content/plugins/sociofluid/images/facebook_32.png http://www.fitchett.me/wp-content/plugins/sociofluid/images/twitter_32.png

Comments (9)

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?

Write a comment

Anti-Spam Protection by WP-SpamFree

Advertise Here