Currently I ran into the problem how to get the date from a <mx:Datechooser> where the mouse is over. Obviously there is no direct possibility to get it from the datechooser component. I googled quite days around and finally I found a solution for this.
The idea is to generate mouseover events from the datechooser. Normally it’s only fired once on entering the component. So how to generate multiple events everytime the position changes in the component?
It’s done with an invisible button. The button has two states:
- visible=false
- visible=true but due to fillAlphas=”[0.0, 0.0, 0.0, 0.0]” cornerRadius=”0″ alpha=”0.0″ still invisible for the customer
Each time the button gets visible=true it automatically fires a button mouseover event. We use this event to set the visibility again to false. What happens right now? You’re right
The <mx:Datechooser> fires a new mouseover event with the current position of the selected date. It’s kind of brainfuck but right now it’s the only possibility to realize it I know. If you have a better solution, please tell me.
Note the button has the same size like the datechooser to cover all of its area.
Another approach the change the invisible buttons visibility (isn’t that curious?) is a timer event. This is also realized in the code:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” themeColor=”#0EFF02″
creationComplete=”init()”>
<mx:Script>
<![CDATA[
import mx.core.UITextField;
import mx.controls.Alert;
[Bindable]private var day:Date;
public var myTimer:Timer
private function init():void {
myTimer= new Timer(1000);
myTimer.addEventListener(“timer”, timerHandler);
}
private function useDate2(event:MouseEvent):void {
if(event.target is UITextField )
{
if(Number(event.target.text)>0&&Number(event.target.text)<31)
sel.text+=event.target.text+”-”+(myDatechooser.displayedMonth+1)+”-”+myDatechooser.displayedYear+”\n”;
}
myTimer.start();
}
public function dateChooserMouseOut(event:MouseEvent):void {
setButtonInvisible();
myTimer.stop();
}
public function timerHandler(event:TimerEvent):void {
toggleButtonVisibility();
}
private function initDatechooser():void {
var aktDate:Date = new Date();
myDatechooser.selectedDate=aktDate;
}
private function setButtonInvisible():void{
invBTN.visible=false;
}
private function toggleButtonVisibility():void{
invBTN.visible=!invBTN.visible;
}
]]>
</mx:Script>
<mx:DateChooser id=”myDatechooser” x=”114″ y=”24″
mouseOver=”useDate2(event)” mouseOut=”dateChooserMouseOut(event)”
backgroundColor=”#FFFFFF” creationComplete=”initDatechooser()” />
<mx:TextArea id=”sel” height=”447″ width=”206″ x=”104″ y=”212″ valueCommit=”sel.verticalScrollPosition=sel.maxVerticalScrollPosition”/>
<mx:Button x=”114″ y=”24″ id=”invBTN” label=”Button” visible=”false” width=”174″ height=”180″ mouseOut=”setButtonInvisible()” mouseOver=”setButtonInvisible()”/>
</mx:Application>
0&&Number(event.target.text)