April 8th, 2008 by Kyle
Tags: datagrid, DateField, Flex, itemeditor
Posted in: Flex
The flex docs show how to use a DateField component as a Datagrid itemEditor. But what if your date data is actually a string instead of a date object? The sample below shows how to code a custom itemEditor extending the DateField component that allows you to do this. (I have also show how to use the drop in DateField as an editor for Dates.)
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
Here is the app code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.events.DataGridEvent;
import mx.collections.ArrayCollection;
import mx.controls.DateField;
import mx.core.ClassFactory;
import mx.controls.dataGridClasses.DataGridListData;
[Bindable]
public var ac:ArrayCollection = new ArrayCollection(
[{dateString:"11/12/2006", contact:"ABD DEF", dt: new Date(2003,10,23)},
{dateString:"11/12/2007", contact:"GHI", dt:new Date(2004,11,2)},
{dateString:"10/10/2007", contact:"JKL MNOP", dt:new Date(2007,4,14)},
{dateString:"09/12/2007", contact:"QRSTUV W XY Z", dt:new Date(2006,1,1)}]);
]]>
</mx:Script>
<mx:DataGrid editable="true" height="95%" width="95%" id="dg" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="DateString" dataField="dateString" width="120"
itemEditor="DateEditor"
editorDataField="text" />
<mx:DataGridColumn headerText="Date" dataField="dt" width="120"
itemRenderer="mx.controls.DateField"
rendererIsEditor="true"
editorDataField="selectedDate"/>
<mx:DataGridColumn headerText="Contact" dataField="contact" width="80"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Here is the code for the itemEditor:
implements="mx.controls.listClasses.IListItemRenderer"
focusIn="open()">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void{
if(listData){
var newDate:Date;
if (value is String){
newDate = new Date(Date.parse(data as String));
super.data=newDate;
}
else if (value is Date){
super.data=value as Date;
}
}
}
]]>
</mx:Script>
</mx:DateField>
Tweet
14 Comments »

July 17th, 2008 at 8:22 am
Thanks for the info. You are teh awesome!!!1!1!!!
September 5th, 2008 at 4:54 pm
for the most part this is super clean and nice. one thing i am noticing is that the date picker is defaulting to today’s date rather than the date of the string being provided. this also causes the original date value to get lost if the user doesn’t make a new selection.
September 15th, 2008 at 7:01 am
Hi,
Thanks for the post. To make the DateField show and select the correct date (from the dataProvider), just add this:
super.text = value;
I also added showToday=”false” into the extended DateField component.
I believe this line:
newDate = new Date(Date.parse(data as String));
is meant to be:
newDate = new Date(Date.parse(value as String));
Cheers,
Stephen.
October 30th, 2008 at 12:13 pm
Cant get it to work… where do you put super.text? you should update the code example or be more specific. with the follow-up.
As it might show, I dont know much about super’s and overrides
May 13th, 2009 at 4:30 pm
Hi, thanks for idea. But I need to modify your code to works.
Basically, need to set super.selectedDate, not super.date.
take look in my code (works very well for me):
//If original value is a XML (field is a required attribute from your new component), else, remove this line
var value:String = XML(value).attribute(field);
if (value is String){
newDate = new Date(Date.parse(value as String));
super.selectedDate=newDate;
}
else if (value is Date){
super.selectedDate=value as Date;
}
June 15th, 2009 at 5:17 am
try to edit like bellow, but don’t forget to set showToday=”false”, one more thing is very important value.dateString is depend on array collection we use from data provider… so change dateString with your own data provider field for date editor, ok!
if(listData){
var newDate:Date;
var value1 = value.dateString;
if (value1 is String){
newDate = new Date(Date.parse(value1 as String));
super.selectedDate=newDate;
}
else if (value1 is Date){
super.selectedDate=value1 as Date;
}
}
January 12th, 2010 at 10:30 am
Thanks for the Code provided here. It is very useful to me. I changed the code for Indian date format. And it work on any data provider, no need to change the code.
January 23rd, 2010 at 1:05 am
Kyle, thanks for the great post, it may very well save my bacon! I’ve got the same problem as Nolan, how do you set the default data to the text in the date chooser? Thx.
January 25th, 2010 at 10:39 am
thanx a lot for the suggestions, i searched a lot for a thing that in theory should be easy to implement, but is not.
here the code i modified in order not to create an extra class:
March 25th, 2010 at 11:11 pm
Wonderful example. This is exactly what I was looking for. Thanks.
April 29th, 2010 at 4:39 am
I used the DateField as itemeditor in the ADG and faced the same issue. My solution was to set the editorDataField-Property of the ADGcolumn in the following way …
This solved the error that occured during the string into date conversion.
Kind Regards!
FuX
April 29th, 2010 at 4:44 am
Unfortunatelly the comment-script striped the coding of my last post. I forgot to remove the surrounding brackets
editorDataField=”selectedDate”
Kind Regards!
FuX
May 31st, 2010 at 9:12 pm
I have been looking around blog.flexmonkeypatches.com and really am impressed by the awesome content here. I work the nightshift at my job and it is boring. I’ve been coming here for the previous couple nights and reading. I just wanted to let you know that I’ve been enjoying what I have seen and I look forward to reading more.
July 26th, 2010 at 10:20 am
Ok I finally got a nicely working version with the date not getting removed when you go to edit it. it the date editor component use this code (you don’t need the old code):
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var _ld:BaseListData;
override public function get listData():BaseListData{
return _ld;
}
override public function set listData(value:BaseListData):void{
_ld = value;
}
private var _dd:Object;
[Bindable(event="dataChange")]
override public function set data(value:Object):void{
_dd = value;
if (_ld && _ld is DataGridListData){
super.text = value[DataGridListData(_ld).dataField].toString();
dispatchEvent(new Event(“datagrid data”));
}
}
Then in your datagrid invoke it like so:
<mx:DataGridColumn headerText=”Delivery Date” width=”120″ dataField=”deliverdate” editorDataField=”text” itemEditor=”DateEditor” />
boooyah