Selecting entire weeks in an MX DateChooser control in Flex 3

The following example shows how you can make the MX DateChooser control select entire dates in the calendar by listening for the change event and then setting the selectedRanges property.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/19/selecting-entire-weeks-in-an-mx-datechooser-control-in-flex-3/ -->
<mx:Application name="MX_DateChooser_selectedRanges_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.CalendarLayoutChangeEvent;
 
            protected function iChooChooChooseYou_changeHandler(evt:CalendarLayoutChangeEvent):void {
                var dat:Date = evt.newDate;
                if (dat) {
                    var strtDat:Date = new Date(dat.time);
                    strtDat.setDate(strtDat.date - strtDat.day);
                    var endDat:Date = new Date(strtDat.time);
                    endDat.setDate(endDat.date + 6);
                    iChooChooChooseYou.selectedRanges = [{rangeStart:strtDat, rangeEnd:endDat}];
 
                    iChooChooChooseYou.validateNow();
                    rangeSt.htmlText = "<b>rangeStart:</b> " + (iChooChooChooseYou.selectedRanges[0].rangeStart as Date).toDateString();
                    rangeEd.htmlText = "<b>rangeEnd:</b> " + (iChooChooChooseYou.selectedRanges[0].rangeEnd as Date).toDateString();
                }
            }
        ]]>
    </mx:Script>
 
    <mx:VBox>
        <mx:DateChooser id="iChooChooChooseYou"
                allowMultipleSelection="true"
                allowDisjointSelection="false"
                yearNavigationEnabled="true"
                change="iChooChooChooseYou_changeHandler(event);" />
        <mx:Label id="rangeSt" width="100%" />
        <mx:Label id="rangeEd" width="100%" />
    </mx:VBox>
 
</mx:Application>

3 thoughts on “Selecting entire weeks in an MX DateChooser control in Flex 3

    1. @Alex,

      Not everything has running SWFs. Depends on how much time I have. This is pretty easy to copy-paste into Builder and see the result though.

      Peter

  1. How do you take the selected week and use the dates to do a query? I the dates go into an array, how would you pull each date out to do a query? I assume something like this is used: for( var i:int = 0; i <fieldCount; i++ )

Comments are closed.