The following example shows how you can filter an MX DataGrid control in Flex using two MX DateField control’s and filtering the ArrayCollection data provider.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ --> <mx:Application name="MX_DataGrid_filter_DateField_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ protected const MIN_DATE:Date = new Date(2010, 0, 1); protected const MAX_DATE:Date = new Date(2010, 11, 31); protected function date_labelFunc(item:Object, col:DataGridColumn):String { var time:Number = Date.parse(item[col.dataField]); return new Date(time).toDateString(); } protected function arrColl_filterFunc(item:Object):Boolean { var cDate:Number = Date.parse(item.holidayDate); if (!sDate || !eDate) { return true; } if (sDate.selectedDate && eDate.selectedDate) { return (sDate.selectedDate.time <= cDate) && (eDate.selectedDate.time >= cDate); } else if (sDate.selectedDate) { return sDate.selectedDate.time <= cDate; } else if (eDate.selectedDate) { return eDate.selectedDate.time >= cDate; } else { return true; } } protected function init():void { sDate.selectedDate = MIN_DATE; sDate.selectableRange = {rangeStart:MIN_DATE, rangeEnd:MAX_DATE}; eDate.selectedDate = MAX_DATE; eDate.selectableRange = sDate.selectableRange; } ]]> </mx:Script> <mx:ArrayCollection id="arrColl" filterFunction="arrColl_filterFunc"> <mx:source> <mx:Array> <mx:Object holidayName="New Years" holidayDate="2010/1/1" /> <mx:Object holidayName="Martin Luther King, Jr. Day" holidayDate="2010/1/18" /> <mx:Object holidayName="Groundhog Day" holidayDate="2010/2/2" /> <mx:Object holidayName="Chinese New Year" holidayDate="2010/2/14" /> <mx:Object holidayName="Valentine's Day" holidayDate="2010/2/14" /> <mx:Object holidayName="President's Day" holidayDate="2010/2/15" /> <mx:Object holidayName="Ash Wednesday" holidayDate="2010/2/17" /> <mx:Object holidayName="Daylight Saving Time starts" holidayDate="2010/3/14" /> <mx:Object holidayName="St. Patrick's Day" holidayDate="2010/3/17" /> <mx:Object holidayName="First Day of Spring" holidayDate="2010/3/20" /> <mx:Object holidayName="April Fool's Day" holidayDate="2010/4/1" /> <mx:Object holidayName="Easter" holidayDate="2010/4/4" /> <mx:Object holidayName="Administrative Professional's Day" holidayDate="2010/4/21" /> <mx:Object holidayName="Earth Day" holidayDate="2010/4/22" /> <mx:Object holidayName="Cinco De Mayo" holidayDate="2010/5/5" /> <mx:Object holidayName="Mothers Day" holidayDate="2010/5/9" /> <mx:Object holidayName="Armed Forces Day" holidayDate="2010/5/15" /> <mx:Object holidayName="Memorial Day" holidayDate="2010/5/31" /> <mx:Object holidayName="Flag Day" holidayDate="2010/6/14" /> <mx:Object holidayName="Father's Day" holidayDate="2010/6/20" /> <mx:Object holidayName="Summer Begins" holidayDate="2010/6/21" /> <mx:Object holidayName="Independence Day/July 4th" holidayDate="2010/7/4" /> <mx:Object holidayName="Labor Day" holidayDate="2010/9/6" /> <mx:Object holidayName="Grandparents Day" holidayDate="2010/9/12" /> <mx:Object holidayName="First Day of Autumn" holidayDate="2010/9/23" /> <mx:Object holidayName="Columbus Day" holidayDate="2010/10/11" /> <mx:Object holidayName="United Nations Day" holidayDate="2010/10/24" /> <mx:Object holidayName="Halloween" holidayDate="2010/10/31" /> <mx:Object holidayName="All Saints' Day" holidayDate="2010/11/1" /> <mx:Object holidayName="Daylight Saving Time Ends" holidayDate="2010/11/7" /> <mx:Object holidayName="Veteran's Day" holidayDate="2010/11/11" /> <mx:Object holidayName="Thanksgiving" holidayDate="2010/11/25" /> <mx:Object holidayName="Wright Brothers Day" holidayDate="2010/12/17" /> <mx:Object holidayName="First Day Winter" holidayDate="2010/12/21" /> <mx:Object holidayName="Christmas" holidayDate="2010/12/25" /> <mx:Object holidayName="New Years Eve" holidayDate="2010/12/31" /> </mx:Array> </mx:source> </mx:ArrayCollection> <mx:ApplicationControlBar dock="true"> <mx:Form> <mx:FormItem label="Start date:"> <mx:DateField id="sDate" change="arrColl.refresh();" /> </mx:FormItem> <mx:FormItem label="End date:"> <mx:DateField id="eDate" change="arrColl.refresh();" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:DataGrid id="dGrid" dataProvider="{arrColl}" width="400"> <mx:columns> <mx:DataGridColumn dataField="holidayName" /> <mx:DataGridColumn dataField="holidayDate" labelFunction="date_labelFunc" /> </mx:columns> </mx:DataGrid> </mx:Application>
View source is enabled in the following example.

{ 8 comments… read them below or add one }
plz send how flex connected to m s access or ms sql server
send any program
Can you show an example of this flex component? Thanks!!
Added
Hi Peter, I can’t find any place around here to contact you. I hear that you’re the QE for the Flex 4 text components. I’m having trouble embedding tags. Example would be a span of words that are bold and then make one of those words blue. Is that just a limitation with Flex 4 or am I missing something? I have a blog post about using HTML text in Flex 4 text components. If you have an answer I’d really appreciate it if you commented there. http://polygeek.com/2249_flex_display-html-text-in-the-spark-textarea
@polyGeek,
Peter
Hello
What code would I use in the ArrayCollection to get this to work with my PHP data Services?
Thanks
@Brian,
I’d try using HTTPService to connect to the PHP script which returns some XML or something.
Peter
Thanks for this tutorial…