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.

Related posts:

  1. Flex component transformation with ObjectHandles
  2. SuperPanelPlus: Resizable Flex Panel Component with Accessible Styling
  3. Adding a ToolTip function to a ComboBox in Flex
  4. ImageSwap (crossfade) Flex Component
  5. Pleat Menu – Flex Component (draft)

Filed under: AIR, components, flex
Comments
  • 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?
  • 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;
    }
  • Nice, thanks!
  • 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
  • wayne lee
    nice control, just what I was after! :)
  • feby
    Cool ! :-)

    Thanks.

    Feby
  • 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 :>
  • 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.
  • 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).
  • 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.
  • 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/wrappin...
    Which would be neat for a control like this, once it's fully baked.
blog comments powered by Disqus

360Flex
Flash and the City banner

Kickass Books


Recent Posts

Around

Blogroll

every-sword
every-sword