DateTimeField using Flex 4 Spark Components

May 19

I'm preparing to release a personal project to public beta in a few weeks. As part of the private beta, I have people giving me feedback on the user interface. Chas, my wife, complained that the time picker component I was using, from the Yahoo Astra package, was confusing. Another of her complains was that she couldn't tab through the time fields without difficulty. I have had this complaint as well, so her feedback was valuable.

In looking around at the various timechooser/timepicker controls out there, I didn't really find anything I felt worked well. I think some folks have made noble efforts at creating some nice controls, but I just didn't feel they hit the mark when it came to simplicity, usability or ease of implementation. I really did not want to develop my own because I realized this would take me a couple of my evenings. However, after hours of searching I set about to do exactly this.

I'm not going to go a lot into how I built it in this post. Overall its relatively simple, made from a DateChooser, Spark TextInputs, and a DropDownList. It has built-in validation and the isValid property on the object can be bound to determine when the date is a valid value.

Click here to see demo and view source (right click on the demo to view the source)

I have not done extensive testing on this, but would appreciate any feedback or bugs you might find. It's not skinned, so it's not the prettiest thing in the world. Also, I built the control for a Spark app in Flex 3 Compatibility mode. The demo I provided works with without Flex Compatibility mode, and you will need to change the namespaces of the ns tags to mx when you want to use it with Flex 3 Compatibility mode. I would love any feedback you might have!

Tags: Flex, Flash & AS3

14 responses so far ↓

  • 1 Michael // May 19, 2010 at 11:47 PM

    Seems nice, although I would validate when user presses tab or the textInput loses focus. I was able to put hh:24, mm: 67, ss: 70 so I guess there might be something wrong with the "timing" of the validation.
    Also I found out that it seems more appealing to people to see the time as 24h cycle, they think it is easier to remember. or you should concider hh:mm:ss model I have a post of how to achieve this under adobe cookbook. search for "hours" post.
    Cool post dude keep it up!

  • 2 TJ Downes // May 20, 2010 at 6:15 AM

    Hi Michael, thanks for the feedback! While I think I agree with your thoughts on the validation, I'm not so certain I agree with your thoughts on a 24 hour clock. For this project, at least, my users will be US folks, who, as a rule, do not use a 24 hour clock. What are your thoughts on why I would want to use a 24 hour clock model?


  • 3 Michael // May 21, 2010 at 3:33 AM

    Well I reside in Europe so I always thought AM and PM to be slightly confusing when addind a time into a calendar, if you forget to set the AM/PM option 9 o'clock can be either morning or night, whilst 21:00 or 9:00 is unique. It is a matter of habit mostly...
    The dateField is a powerful tool indeed. You might also want to consider extending it to support date ranges, thats always useful ;)

  • 4 TJ Downes // May 21, 2010 at 9:32 AM

    Hey Michael, thanks for the feedback. Ill add the 24hr clock option into it soon and repost it.

  • 5 Drew // Sep 27, 2010 at 12:21 PM

    FYI: this is generating an error now: Error #2046: The loaded file did not have a valid signature.

  • 6 Tibor // Oct 21, 2010 at 7:36 AM

    Link doesn't work.

  • 7 Joseph Hillhouse // Nov 4, 2010 at 11:40 AM

    What happened? I went to the site and received Error #2046 and there haven't been posts since May. Did you decide to cancel the project?

  • 8 TJ Downes // Dec 8, 2010 at 12:04 PM

    I updated the project to eliminate the 2046 error. Sorry it's taken a while!

    Also, there may be bugs. I haven't really spent a lot of time on the project. By March I should be putting more time into it, and will post new builds as they are available. Until then, you have the source. If you update it, I'd definitely appreciate a copy!

  • 9 aa // Sep 25, 2011 at 10:09 AM

    I get this error:
    Could not resolve <mx:DateField> to a component implementation.   DateTimeField.mxml

    Any chance you or anyone know what that is about?

    Thanks!

  • 10 TJ Downes // Oct 1, 2011 at 9:50 PM

    Hello aa, sorry it has taken some time to get back on your question. I'll have to check my blog configuration, it does not seem to be sending me notifications of comments anymore.

    Your issue sounds to me like your project is configured for Spark only. Since there is not equivalent of DateField in Spark, it is necessary to configure your project for MX and Spark components. To do so, right click on your project and select properties. In the Build Path options, ensure MX + Spark is selected, then click OK.

    If you're still having issues, feel free to look me up on G+ or Twitter.

  • 11 Nikos // Nov 18, 2011 at 9:26 AM

    has there been any new version of this?
    Great code!!

    It would be nice if some validation red color would be shown before the date is set with invalid dates

    _selectedDate = new Date(dateField.selectedDate.fullYear, dateField.selectedDate.month, dateField.selectedDate.date, hrs, mins, secs, 0);

  • 12 TJ Downes // Nov 18, 2011 at 11:13 AM

    Nikos, thanks for the compliments. To be honest, I do not recall when the last time it was updated. I think some work has been done by me and not published to the blog.

    I'll try to find some time over the next week to get this code into a GitHub repository and make sure it's the latest code. Honestly, I don't use it much anymore, and don't see myself using it much in the future. It likely has some small bugs that need to be worked out, so hopefully the community will take it and run with it once it's on GitHub.

  • 13 Chris Ellem // Dec 2, 2011 at 3:18 PM

    sorry TJ your datepicker is not spark at all!!

    people should go here

    http://www.jabbypanda.com/blog/2010/12/datefield4-component-for-flex-4-sdk/

  • 14 TJ Downes // Dec 14, 2011 at 8:57 AM

    Hey Chris,

    Yes, you are correct. There's no date picker for Spark. My apologies if you received that impression. The overall message I was trying to convey is that this is a DateTimeField control, not just a DateField.

    In any case, your control looks nice. While it does not replace the need for a DateTimeField, maybe you would consider building one and linking it to this post. The control I created is nearly two years old, I am sure people would appreciate a new and refined fully Spark-themed control.

Leave a Comment

Leave this field empty: