Posts Tagged ‘custom datefield’

Dont re-invent Datefield when it needs to be editable

November 14, 2009 6 comments

Hi guys, we always look for customization if the feature we are looking,  is not available in the flex framework. But  if the same thing is possible with  minor tweaks, what is the need of re-inventing the wheel. I have experienced this scenario when i needed to implement a DateField which should allow the users to edit it as well as it has to display a DateChooser when they edit it, which is not quite possible even if you make editable property of  DateField is true.  As usual i went for google search and found couple of developers created their own component using Grid. I dint have enough time to test and use their component, i stumbled upon dateField public functions named open() and close().

Atlast I found the way of how to show a DateField dateChooser when i make editable property to true ( normally DateChooser wont show up if we make editable true). I extended the DateField component , invoked open() in focus-in event handler and i have done what i wished to be done without spending much time. further if you are not compromised with the position in which DateChooser shows up, you could change the x and y values of dateChoooser of DateField in  its open event.

Check out the below code for reference.

import flash.geom.Point;

import mx.controls.DateField;

public class EditableDatefield extends DateField
public function EditableDatefield()
this.addEventListener(DropdownEvent.OPEN, onOpenDropDown);
this.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);

protected function onFocusIn(event : FocusEvent):void

protected function onOpenDropDown(event : DropdownEvent):void{
var point : Point = new Point(this.textInput.x, this.textInput.y);
var targetCoordinates : Point = this.localToGlobal(point);
dropdown.x = targetCoordinates.x - dropdown.width/2 + textInput.width/2;
dropdown.y = targetCoordinates.y + textInput.height + 5;

I hope this post would atleast help one flex developer and would save his/her time. If you find any problem with above code, please let me know i will try to resolve it as much as possible. Thank you for reading this post!