Building Blocks you should not target low coupling, instead target appropriate coupling – Mike Labriola (@mlabriola)

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.

Here's the Source

Comments (15) Trackbacks (2)
  1. 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.

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

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

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

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

  6. Cool ! :-)

    Thanks.

    Feby

  7. nice control, just what I was after! :)

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

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

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

  11. 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?

  12. 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?

  13. 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;


Leave a comment

You must be logged in to post a comment.