Home > Advanced, FLEX > Dont re-invent Datefield when it needs to be editable

Dont re-invent Datefield when it needs to be editable

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.events.FocusEvent;
import flash.geom.Point;

import mx.controls.DateField;
import mx.events.DropdownEvent;

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!

  1. November 14, 2009 at 11:19 am

    really good mahesh! this is helpful for me. one more thing you can post amf-php connection

  2. December 18, 2009 at 6:08 am

    great idea. bookmarked.

  3. Kevin Schumacher
    January 29, 2010 at 2:32 am

    Thanks for the help. It was just what I needed.

  4. Andi
    July 1, 2013 at 2:19 pm

    Great stuff, saved me hours 😉

  5. Sriharsha
    March 20, 2014 at 12:59 am

    Its good friend.
    Can you please help me out with another issue I had.
    On mouseover I need to show data on tooltip. On mouseover I need to make a remote object call to service and get the data and show up. But due to remote object sync call limitation am not able to show the data on mouse over for the first time. If I mouse over second time am able to see the data .can you please help me out how can I make my remote object call synchronous in flex. Hopefully waiting for your reply

  6. Ketan
    June 28, 2016 at 4:25 am

    Thanks nice example. Can you add prompt in datefield?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: