11Oct/0815
Flex Date and Time (datetime) Picker Control
I saw one of these at some point, but couldn't find it when I needed it again. Pretty simple, the control has a property called selectedDate that returns a date object represented by the selected date and time. You can also feed it a Date and it will adjust to that. It is on a 12 hour clock. It dispatches a change event (Event.CHANGE) as a new date/time is selected.
There is an Inspectable property called minuteIncrement to adjust the increment on the minute stepper. I couldn't figure out how to have double digits on the 0-9 minutes. If anybody knows how I might achieve that, please let me know.

The Flex Date and Time (datetime) Picker Control by Joel Hooks, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 3.0 United States License.
















November 25th, 2008 - 10:08
Thanks!
Do you know if there’s any way I might be able to determine when a user has finished editing BOTH the date and time (without explicitly putting a “done” button on there)??
I’m thinking of something like a “focusout” that applies to the entire control.
Also, check out:
http://blog.flexexamples.com/2008/11/17/wrapping-values-on-an-fxnumericstepper-control-in-flex-gumbo/
Which would be neat for a control like this, once it’s fully baked.
January 3rd, 2009 - 12:35
Evan, you can use the mouseDownOutside event, it works like the DateChooser DateSelect Popup. But you have to make the date selection a Popup component.
Joel thanks in advance for this component I haven’t use it yet but it seems to fit my needs.
January 28th, 2009 - 20:48
I haven’t tried it yet, but while looking at your source code it appears your setter function doesn’t handle midnight. In this situation getHours() will return 0, but you’ll want to do hours.value = 12. (But correct me if I’m wrong).
January 28th, 2009 - 21:11
You are 100% correct Chris, and I’ve actually fixed this in the version I am using but haven’t updated it yet. I will do so now.
January 28th, 2009 - 21:26
There we go, thanks Chris. I noticed this a week or so ago when I was using it in a project, fixed it, and forgot to update. It is a little jacked with the validateNow() calls and could probably use some more work, but it displays the time properly :>
February 20th, 2009 - 23:24
Cool !
Thanks.
Feby
March 12th, 2009 - 17:34
nice control, just what I was after!
May 10th, 2009 - 19:49
I’ve noticed that when handling the change event, if I click the up button for hours, I actually get the change event 3 times. Since I’m creating a post processing activity that occurs after this change, I’d really prefer this to only happen once. Are you aware of a work around?
Thanks
July 18th, 2009 - 10:41
Nice, thanks!
July 18th, 2009 - 16:41
Nice, thanks!
October 14th, 2009 - 09:23
This will put the prefix 0 on the front of single digits
if (hours.mx_internal::inputField.text.length == 1) {
hours.mx_internal::inputField.text = '0' + hours.mx_internal::inputField.text;
}
October 14th, 2009 - 15:23
This will put the prefix 0 on the front of single digits
if (hours.mx_internal::inputField.text.length == 1) {
hours.mx_internal::inputField.text = '0' + hours.mx_internal::inputField.text;
}
October 21st, 2009 - 21:57
I am having a problem when returning the date back from a webservice that the timepicker is already loaded and cannot get it to show the date/time I want from my database. Do you have any idea how to work around that?
October 22nd, 2009 - 03:57
I am having a problem when returning the date back from a webservice that the timepicker is already loaded and cannot get it to show the date/time I want from my database. Do you have any idea how to work around that?
August 2nd, 2010 - 21:05
Just as a small improvement, you can add this line in the handleChange() function to make the numeric stepper show as “00″ instead of just “0″
if(minutes.value < 10) minutes.mx_internal::inputField.text = “0″ + minutes.value;
you'll also need to import mx.core.mx_internal;