Building Blocks

11Oct/0820

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.

Here's the Source

Creative Commons License
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.
Filed under: AIR, components, flex Leave a comment

  • Pingback: Websites tagged "datetime" on Postsaver

  • Evan

    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.

  • Pingback: Composant Flex - Sélection de la Date et de l'Heure (DateTime) - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3

  • andresmaro

    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.

  • http://www.stepsmarketing.com Chris

    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).

  • Joel

    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.

  • Joel

    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 :>

  • feby

    Cool ! :-)

    Thanks.

    Feby

  • wayne lee

    nice control, just what I was after! :)

  • Adam

    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

  • http://krishengreenwell.com/ Krishen

    Nice, thanks!

  • http://krishengreenwell.com/ Krishen

    Nice, thanks!

  • Joe Murphy

    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;
    }

  • Joe Murphy

    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;
    }

  • johnnyfree

    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?

  • johnnyfree

    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?

  • http://www.jonathan-dumaine.com Jonathan Dumaine

    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;

  • neurowave

    Thanks man … THis is wat i was looking for :)

  • Fabbbrrr!!!

    thanks a lot from Mendoza, Argentina! :D

  • Mikolaj Kepa

    Very nice thx :)

  • Julius_bugs

    you r awesome!

  • Sa

    Not a tricky one.

« ImageSwap (crossfade) Flex Component Django Authorization from Flex/AIR via PyAMF »

Books


Actionscript Developers Guide to Robotlegs

Flex 4 in Action

Speaking

360Flex
FATC2011
360Flex
Flash and the City banner

Kickass Books


Meta