flex DateFormatter

The DateFormatter is a very simple formatter. To use it you just have to specify the formatString property, apply the format and you are done.

<mx:DateFormatter formatString="Y|M|D|A|E|H|J|K|L|N|S"/>

Here are some short explanations of what the characters in formatString represent:

Y – Year
M – month
D – Day
A – AM/PM indicator
E – day of the week
H – Hour (1-24 hours format)
J – Hour (0-23 hours format)

K – Hour in am/pm (0-11 hours format)
L – Hour in am/pm (1-12 hours format)
N – Minutes
S – Seconds

The formatString may also contain other words as separators between Y, M, D, A etc. as we will see in the example below.

Here is an example that uses the Flex DateFormatter Class

<?xml version="1.0" encoding="utf-8"?> <!--http://www.popamihai.com/2009/07/flex/example-of-using-the-dateformatter-class-in-flex/--> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" creationComplete="formatDates()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ private function formatDates():void{ dateFormatter.formatString = "DD/MM/YY"; formattedDate1.text = dateFormatter.format(initialDate.text); dateFormatter.formatString = "EEE DD/MM/YY"; formattedDate2.text = dateFormatter.format(initialDate.text); dateFormatter.formatString = "EEEE DD/MM/YY"; formattedDate3.text = dateFormatter.format(initialDate.text); dateFormatter.formatString = "EEEE DD MMM YYYY"; formattedDate4.text = dateFormatter.format(initialDate.text); dateFormatter.formatString = "EEEE DD MMMM YYYY"; formattedDate5.text = dateFormatter.format(initialDate.text); dateFormatter.formatString = "EEEE DD MMMM YYYY at HH:NN"; formattedDate6.text = dateFormatter.format(initialDate.text); dateFormatter.formatString = "EEEE DD MMMM YYYY at HH:NN A"; formattedDate7.text = dateFormatter.format(initialDate.text); dateFormatter.formatString = "EEEE DD MMMM YYYY at HH:NN.SS A"; formattedDate8.text = dateFormatter.format(initialDate.text); } ]]> </mx:Script> <mx:DateFormatter id="dateFormatter" /> <mx:Text text="Change The Initial Date And Format The New Dates" fontWeight="bold"/> <mx:Form> <mx:FormItem label="Initial Date:" > <mx:TextInput id="initialDate" text="01.01.2009 10:34 57" /> </mx:FormItem> <mx:FormItem label="DD/MM/YY" > <mx:TextInput id="formattedDate1" /> </mx:FormItem> <mx:FormItem label="EEE DD/MM/YY" > <mx:TextInput id="formattedDate2" /> </mx:FormItem> <mx:FormItem label="EEEE DD/MM/YY" > <mx:TextInput id="formattedDate3" /> </mx:FormItem> <mx:FormItem label="EEEE DD MMM YYYY" > <mx:TextInput id="formattedDate4" /> </mx:FormItem> <mx:FormItem label="EEEE DD MMMM YYYY" > <mx:TextInput id="formattedDate5" /> </mx:FormItem> <mx:FormItem label="EEEE DD MMMM YYYY at HH:NN" > <mx:TextInput id="formattedDate6" /> </mx:FormItem> <mx:FormItem label="EEEE DD MMMM YYYY at HH:NN A" > <mx:TextInput id="formattedDate7" /> </mx:FormItem> <mx:FormItem label="EEEE DD MMMM YYYY at HH:NN.SS A" > <mx:TextInput id="formattedDate8" /> </mx:FormItem> <mx:FormItem > <mx:Button click="formatDates()" label="format dates"/> </mx:FormItem> </mx:Form> </mx:Application>

In the following example the formatString is displayed on the left column, and the formatted dates are displayed in the TextInput controls from the right column. To see how the different formats work change the “Initial Date” with a valid date and press the “format dates” button.

View Source is enabled in the above example. To view the source files right click on the swf and choose “View Source” from the context menu.