Selecting entire weeks in an MX DateChooser control in Flex 3

by Peter deHaan on March 19, 2010

in DateChooser

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>

{ 2 comments… read them below or add one }

1 Alex March 22, 2010 at 10:40 pm

Where’s the running example?

Reply

2 Peter deHaan March 23, 2010 at 8:36 am

@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

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: