Format Date in DataGrid

DataGridDateFormat.mxml

<fx:Declarations>
    <s:DateTimeFormatter id="dateTimeFormatter" dateTimePattern="yyyy-MM-dd"/>
</fx:Declarations>

<s:DataGrid id="dg" height="100%" width="100%" borderVisible="false">
	<s:columns>
		<s:ArrayList>
			<s:GridColumn dataField="Date" headerText="Date" formatter="{dateTimeFormatter}"/>
		</s:ArrayList>
	</s:columns>		
</s:DataGrid>

DataGridDateFormatFunction.mxml

<fx:Script>
    <![CDATA[
		import spark.formatters.DateTimeFormatter;

		private function formatDate (item:Object, column:GridColumn):String {
			var df:DateTimeFormatter = new DateTimeFormatter();
			df.dateTimePattern = "dd-MMM-yyyy";
			
			var value:Object = item[column.dataField];
			return df.format(value);
		}			
	]]>
</fx:Script>

<s:DataGrid id="dg" height="100%" width="100%" borderVisible="false">
	<s:columns>
		<s:ArrayList>
			<s:GridColumn dataField="TRAN_DATE" headerText="Transaction Date" labelFunction="formatDate"></s:GridColumn>
		</s:ArrayList>
	</s:columns>		
</s:DataGrid>