Flex Examples

The following example shows how you can determine when the Flex DateField control’s is opened or closed by listening for the open or close events.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

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

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:DateField id="dateField"
                open="dateField_openClose(event);"
                close="dateField_openClose(event);" />
    </mx:ApplicationControlBar>

    <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 here is the “same” example, but in ActionScript instead of MXML:

comps/MyDateField.as

/** http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ */
package comps {
    import mx.collections.ArrayCollection;
    import mx.containers.VBox;
    import mx.controls.DataGrid;
    import mx.controls.DateField;
    import mx.controls.Label;
    import mx.core.Application;
    import mx.core.ClassFactory;
    import mx.events.DropdownEvent;

    public class MyDateField extends VBox {

        [Bindable]
        private var arrColl:ArrayCollection;

        private var dateField:DateField;
        private var dataGrid:DataGrid;

        public function MyDateField() {
            super();
            init();
        }

        private function init():void {
            arrColl = new ArrayCollection();

            dateField = new DateField();
            dateField.addEventListener(DropdownEvent.OPEN, dateField_openClose);
            dateField.addEventListener(DropdownEvent.CLOSE, dateField_openClose);

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

            Application.application.appControlBar.addChild(dateField);

            addChild(dataGrid)
        }

        private function dateField_openClose(evt:DropdownEvent):void {
            arrColl.addItem(evt);
        }
    }
}

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar id="appControlBar" dock="true" />

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

</mx:Application>

View source is enabled in the following example.