Formatting And Sorting Dates In DataGrid

So you’ve got a DataGrid and you want to format the dates and sort the dates regardless of how its formatted. It’s pretty straight forward using the labelFunction and sortCompareFunction on the DataGridColumn.

First we’ll set up the data and datagrid.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->

 </fx:Declarations>
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;

 [Bindable]
 private var initDG:ArrayCollection = new ArrayCollection([
				{ID:1, datePosted:"03/15/2009"},
				{ID:2, datePosted:"02/18/2009"}
 ]);

 ]]>
 </fx:Script>

 <mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
 <mx:columns>
 <mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
 <mx:DataGridColumn headerText="Date" dataField="datePosted" />
 </mx:columns>
 </mx:DataGrid>
</s:Application>

Now lets add the date formatter. Add the date formatter component and identify the resulting format you’re looking for. Next we add a function that uses that date formatter.
Finally we’ll add a call to our function from the datagrid column using labelFunction

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 <mx:DateFormatter id="dateFormatter" formatString="MMMM D, YYYY" />

 </fx:Declarations>
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;

 [Bindable]
 private var initDG:ArrayCollection = new ArrayCollection([
				{ID:1, datePosted:"03/15/2009"},
				{ID:2, datePosted:"02/18/2009"}
 ]);

 private function dateFormat(item:Object, eventGridColumn:DataGridColumn):String
 {
 return dateFormatter.format(item.datePosted);
 }

 ]]>
 </fx:Script>

 <mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
 <mx:columns>
 <mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
 <mx:DataGridColumn headerText="Date" dataField="datePosted" labelFunction="dateFormat"/>
 </mx:columns>
 </mx:DataGrid>
</s:Application>

To add the sorting we’ll add a sorting method and call it from our datagrid column using sortCompareFunction

Here is the Completed Code

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<mx:DateFormatter id="dateFormatter" formatString="MMMM D, YYYY" />

	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.utils.ObjectUtil;

			[Bindable]
			private var initDG:ArrayCollection = new ArrayCollection([
				{ID:1, datePosted:"03/15/2009"},
				{ID:2, datePosted:"02/18/2009"}
			]);

			private function dateFormat(item:Object, eventGridColumn:DataGridColumn):String
			{
				return dateFormatter.format(item.datePosted);
			}
			private function date_sortCompareFunc(itemA:Object, itemB:Object):int {
				/* Date.parse() returns an int, but
				ObjectUtil.dateCompare() expects two
				Date objects, so convert String to
				int to Date. */
				var dateA:Date = new Date(Date.parse(itemA.date));
				var dateB:Date = new Date(Date.parse(itemB.date));
				return ObjectUtil.dateCompare(dateA, dateB);
			}

		]]>
	</fx:Script>

	<mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
		<mx:columns>
			<mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
			<mx:DataGridColumn headerText="Date" dataField="datePosted" sortCompareFunction="date_sortCompareFunc"
							   labelFunction="dateFormat"/>
			</mx:columns>
		</mx:DataGrid>
</s:Application>