Custom Date Chooser Component for Range Selection

April 10, 2008 2:21 PM
The DateChooser component in Flex supports selecting a range of dates if you set allowMultipleSelection to true. The way this works right now is: click on a starting date, hold down the Shift key and then click on the ending date. I've written a custom component by extending DateChooser that allows you to select a range of dates by holding the mouse button down on the starting date and moving the mouse to the ending date.

Demo

Click on the image below for a demo (view source enabled) of the DateIntervalChooser component:

As explained in the demo, the component supports range selection spanning multiple months by advancing the month when mouse moves out of the component while the mouse button is held down and the last date in the month is selected.

Getting the Component

The demo is view source enabled, that is, you can right click anywhere on the demo and choose view source to see and download the code.

The SWC version of the component is also available for download.

Using the Component

DateIntervalChooser works exactly like DateChooser except for the fact that you can't change the allowMultipleSelection property to false.

Sample MXML file using the component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">
  <mx:Script>
    <![CDATA[
private function updateDate(event:Event):void
{
    if ( dateChooser.selectedRanges && dateChooser.selectedRanges.length > 0 )
    {
        var obj:Object = dateChooser.selectedRanges[0];
        startDate.text = obj.rangeStart.toDateString();
        endDate.text = obj.rangeEnd.toDateString();
    }
}
	]]>
  </mx:Script>
  <mx:Panel layout="vertical" title="DateIntervalChooser Component Demo">  
    <mx:Text width="110" id="startDate" text="" />
    <mx:Text width="110" id="endDate" text="" />
    <local:DatePeriodChooser id="dateChooser" change="updateDate(event)" />
  </mx:Panel>
</mx:Application>

Why?

I'm not sure how useful people might find the component as such, but this component is proof to how easy it is to customize components in Flex.

CategoryFlex Comment(s)