AdobeStock_455007340

Using Dates In Flex Data Filtering

A couple of months ago I posted an example that I wrote to show how to filter a Flex DataGrid on the fly. This afternoon a user asked me how to do filtering using date ranges, allowing a date start and end to be specified so as to filter only data that falls within the specified range.
So, here is an updated example. In the interests of simplicity a local ArrayCollection is used. I have added a Date object member named hired (if you were retrieving data from a back-end like ColdFusion then you would likely return a date type which would be converted to an ActionScript Date class so as to be able to easily perform date calculations).
The UI has two DateField controls, startDate and endDate, and a change to either forces a refresh and the filterFunction is applied. The ArrayCollection filterFunction simply checks that the hired date falls between startDate and endDate (allowing null in case no date is selected).
























6 responses to “Using Dates In Flex Data Filtering”

  1. Jimmy Avatar
    Jimmy

    Thanks for the wonderful post. Been googling for an example like this for months.
    Jimmy

  2. Don Kerr Avatar
    Don Kerr

    How would you change this to work with a RemoteObject to CFC instead of the static ArrayCollection?

  3. Ben Forta Avatar
    Ben Forta

    Don, you’d still use an ArrayCollection, but instead of hard-coding it, your RemoteObject result handler would populae it with the returned results.
    — Ben

  4. Thomary Avatar
    Thomary

    Any help with setting the dateField with todays date? I know you can showDate="True" but it does not select the date. I want the field to be preselected with today’s date.
    Any help would be greatly appreciated.

  5. Thomary Avatar
    Thomary

    Sorry, found it. selectedDate="{new Date ()}"
    just leave the () empty.
    Now I have to work on setting a time?
    Anyone know of a datetimeField? 🙂

  6. JD Avatar
    JD

    how can i go by doing: when dataloads only loads certain dates starting by today’s date.
    "{new Date ()}"

Leave a Reply