Flex Examples
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.
<?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:
/** 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);
}
}
}
<?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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Great job! I’m watching you and every tutorial is helping me to understand Flex. Thank you
Thanks for this post. I spend hours to find the solution to do this.
Charles, http://www.tldsco.com
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.
André Baptista,
Look into the
displayedMonthanddisplayedYearproperties. You can use data binding or listen for theDateChooserEvent.SCROLLevent, 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
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.
Peter, thank you for displayedMonth and displayedYear properties stuff. I was exactly looking for it. Thanks..