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.