Adobe Flex TimeInput Control

19 06 2009

So in a previous article I explained why working with time is difficult in Flex (but you probably already know that if you Googled your way here), and we created a helper class to make working with dates and times in Flex easier.

Now we will make a custom input control so time input and validation can be as slick as date entry. To do this we will extend the TextInput class to do the following:

  • restrict the input so that it will only accept characters found in time strings
  • add a value_commit handler so that it parses the text input after it has been changed
  • add a key_down handler so that we can increment and decrement the time when the directional arrows are pressed
  • format the time once it has been parsed
  • behave properly when used as an itemRenderer or itemEditor
Custom TimeInput control

Custom TimeInput control

Click on image to launch the Flex application. View source is enabled.




5 responses

19 06 2009
Parsing dates and times in Flex / AS3 « Flex and Specs()

[…] added another article on implementing the TimeInput control.  The sample application for that has the complete source […]

15 07 2009
Mark Embrey

First, many thanks for posting your TimeInput control.

I am attempting to learn Flex as part of a career change, having had nothing to do with programming in 15+ years. I would like to make use of your example as part of an Air project I am trying out. I think that I might be close to converting it over, but line 65 of my converted TimeInputExample.mxml is generating compile error 1007, which says:

A super statement can be used only inside class instance constructors.

the Adobe® Flex™ 3.3 Language Reference further states:

You cannot use the super statement within static members. You can use the super statement only within class instances.

This is all greek to me… any chance you can shed some light on it?

many, many thanks in advance.

btw, how might you be able to have TimeInput1 accept the data entered after pressing “Enter”? (Currently, I must move the cursor from TimeInput1 to TimeInput2 for TimeInput1 to display data.)

again, many thanks

30 07 2009
Scott Bailey

>> A super statement can be used only inside class instance constructors.

I created the control as an actionscript class. If you are going to convert it to MXML, then you’ll have to modify things. Such as moving the the functionality in the constructor method to a function that is called on initialization. In this particular case, super() is calling the constructor for the superclass. Something you won’t have to do when creating an MXML component.

>> how might you be able to have TimeInput1 accept the data entered after pressing “Enter”?

Most of the work is already done on this one. Just modify the keyPressHandler() in and add a case for the enter key and call parseTextInput()

22 07 2011
Michael C. McGary

Thanks for the TimeInput control. I’m not a programmer by trade (engineer instead). I’ve been trying to use the control in some Flex/Flash Builder 4 code. It works well when I type a time (eg. 22:00 or 10:00 PM) into the control. However, when I simply use one of the arrow keys (KeyPressHandler function invoked for the KeyboardEvent) and subsequently read or copy the TimeInput.text property it does NOT seem to reflect the updates/changes made by my keystrokes. Is there any way I can fix this? I tried putting a case for in the switch contruct for Keyboard.ENTER with a call to parseTextInput(); That didn’t seem to work either. Do you have any idea what am I doing wrong here?

21 10 2011

Hi, it seems the link to the demo does not work anymore. Do you have an alternate location?

Leave a Reply

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

You are commenting using your 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: