Detecting when the user changes the selected month in the DateChooser control in Flex

The following example shows how you can detect when the user changes the selected month in the Flex DateChooser control by listening for the scroll event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/29/detecting-when-the-user-changes-the-selected-month-in-the-datechooser-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DateChooserEvent;

            private function dateChooser_scroll(evt:DateChooserEvent):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DateChooser id="dateChooser"
            scroll="dateChooser_scroll(event);" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRenderer="mx.controls.Label"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

And since this is being requested a bit more lately, here’s the “same” example, but in ActionScript instead of MXML:

comps/MyDateChooser.as

/** http://blog.flexexamples.com/2008/04/29/detecting-when-the-user-changes-the-selected-month-in-the-datechooser-control-in-flex/ */
package comps {
    import mx.collections.ArrayCollection;
    import mx.containers.VBox;
    import mx.controls.DataGrid;
    import mx.controls.DateChooser;
    import mx.controls.Label;
    import mx.core.ClassFactory;
    import mx.events.DateChooserEvent;

    public class MyDateChooser extends VBox {

        [Bindable]
        private var arrColl:ArrayCollection;

        private var dateChooser:DateChooser;
        private var dataGrid:DataGrid;

        public function MyDateChooser() {
            super();
            initApp();
        }

        public function initApp():void {
            setStyle("horizontalAlign", "center");

            arrColl = new ArrayCollection();

            dateChooser = new DateChooser();
            dateChooser.addEventListener(DateChooserEvent.SCROLL, dateChooser_scroll);
            addChild(dateChooser);

            dataGrid = new DataGrid();
            dataGrid.dataProvider = arrColl;
            dataGrid.itemRenderer = new ClassFactory(mx.controls.Label);
            dataGrid.percentWidth = 100;
            dataGrid.percentHeight = 100;
            addChild(dataGrid);
        }

        private function dateChooser_scroll(evt:DateChooserEvent):void {
            arrColl.addItem(evt);
        }
    }
}

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/29/detecting-when-the-user-changes-the-selected-month-in-the-datechooser-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MyDateChooser width="100%" height="100%" />

</mx:Application>

View source is enabled in the following example.

6 thoughts on “Detecting when the user changes the selected month in the DateChooser control in Flex

  1. Hello!

    This is part of what I was looking for. I know can detect that an event occurred in the next or previous month button.

    But how can I detect the Month and Year without selecting a specific day within the DateChooser control ? (I want to get the label info of the month and year I’m currently looking at…)

    Thanks a lot !

    Cheers.

  2. André Baptista,

    Look into the displayedMonth and displayedYear properties. You can use data binding or listen for the DateChooserEvent.SCROLL event, as seen in the following example:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Script>
            <![CDATA[
                import mx.events.DateChooserEvent;
    
                private function dateChooser_scroll(evt:DateChooserEvent):void {
                    trace("displayeYear:", dateChChChooser.displayedYear);
                    trace("displayedMonth:", dateChChChooser.displayedMonth);
                    trace("displayedMonth as String:", dateChChChooser.monthNames[dateChChChooser.displayedMonth]);
                    trace("");
                }
            ]]>
        </mx:Script>
    
        <mx:DateChooser id="dateChChChooser"
                yearNavigationEnabled="true"
                scroll="dateChooser_scroll(event);" />
        <mx:Label text="{dateChChChooser.displayedYear}" />
        <mx:Label text="{dateChChChooser.displayedMonth}" />
        <mx:Label text="{dateChChChooser.monthNames[dateChChChooser.displayedMonth]}" />
    
    </mx:Application>
    

    Peter

  3. You’ve extraordinary helpful. I truly appreciate it. Thank you! I will be forever able to capture a specific displayedMonth and/or Year in any DateChooser and bind it to a related event, because you gave a damn.

  4. Peter, thank you for displayedMonth and displayedYear properties stuff. I was exactly looking for it. Thanks..

Comments are closed.