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>
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

3 Responses to Selecting entire weeks in an MX DateChooser control in Flex 3

  1. Alex says:

    Where’s the running example?

  2. Paul says:

    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++ )

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree