29
Apr
08

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.


2 Responses to “Detecting when the user changes the selected month in the DateChooser control in Flex”


  1. 1 Claudiu Apr 29th, 2008 at 11:16 pm

    Great job! I’m watching you and every tutorial is helping me to understand Flex. Thank you

  2. 2 Charles May 2nd, 2008 at 6:32 am

    Thanks for this post. I spend hours to find the solution to do this.

    Charles, www.tldsco.com

Leave a Reply