DateField4 component for Flex 4 SDK

December 2nd, 2010

   As we all know, a current Flex 4 SDK does not include a new Spark DateField control. And an older ‘halo’ DateField component is left abandoned somewhere in 2008 year. This leaves the users of Flex SDK with simply no choice available out of the box to support the entry of formatted date data entry in standard international date formats.

   Thus, today I am releasing my open-sourced component DateField4 that fixes a number of bugs and issues related to international dates and inline date editing.

   I’ve named my component DateField4, to emphasize the fact that this component is only meant to be used with Flex 4 SDK and beyond.

   Below is the demo that showcases the difference between DateField4 and ‘halo’ DateField.

   For example, you may notice, that ‘halo’ DateField does not support neither French nor Italian international date formatting even to display the date, oouch.

Get Adobe Flash player


   This demo was compiled using newest build of Flex 4.5 SDK to showcase a new Spark Form (good news – we are no longer limited to display validation errors in single tooltip).

   The complete list of new features and bug-list fixes:

[*] Always enabled much improved custom validator for editable DateField that fully supports i18n dates;

[*] Limiting the data entry to “allowedFormatChars” value + numeric chars for editable DateField;

[*] Added “autoShowDropDown” property that controls when dropDown DateChooser menu is displayed;

[*] Pressing ESCAPE key resets the date selection to the previous value before DateField control had obtained a focus;

[*] Improved keyboard navigation for dropDown DateChooser menu when DateField is editable: RIGHT, LEFT, UP, DOWN, PAGE_UP, PAGE_DOWN key strokes are supported;

[!] Fixed SDK-23069 [Localization]: DateFormatter.parseDateString does not support non-latin characters in month and days names;

[!] Fixed SDK-23075 “[Localization]: DateField should support “MMM” and “MMMM” for formatString”;

[!] Fixed SDK-26715 “DateFormatter “parseDateString” method cannot parse dateString value formatted with non default en_US format”;

[!] Default width of DateField is wider by 4px to correctly display selected Date when moving cursor caret to the end of the text.

Public Git URL for this project is: https://github.com/JabbyPanda/DateField4

  • http://kachurovskiy.com Maxim Kachurovskiy

    Can’t see the calendar popup for DateField4 since it’s cropped from the top.

  • http://www.jabbypanda.com JabbyPanda

    2Maxim: Thank you for the feedback, I’ve added extra 150 pixels to the sample’s height, try now

  • http://kachurovskiy.com Maxim Kachurovskiy

    Great, now it works. Now there is another issue – error text is overlapped by popup and popup is not aligned to field when it’s moved:

    http://i54.tinypic.com/a0vtzo.png

  • http://remotesynthesis.com Brian Rinaldi

    Thanks for sharing your post and code. I actually included it in my roundup of the best posts for the week – http://remotesynthesis.com/post.cfm/cool-stuff-with-the-flash-platform-12-9-10.

    I would love it if you add a link to this post in the comments section of the official Flex documentation at http://remotesynthesis.com/post.cfm/cool-stuff-with-the-flash-platform-12-9-10 so that other people researching this issue might come across your solution.

    Thanks again.

    Brian Rinaldi
    Web Community Manager, Platform
    Adobe

  • http://remotesynthesis.com Brian Rinaldi

    Woops. The documentation link should be http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html – please leave a comment there so that people researching the DateField control might be aware of your post.

  • http://www.jabbypanda.com JabbyPanda

    2Brian:

    Thanks for noticing my work.

    One important correction although.

    My component is not a *replacement* for ‘Halo’ DateField component from Flex 3 SDK, it is an *extension* of it, still built on the top of the older ‘halo’ component framework to fix a number of issues with international date formats and inline date value editing.

    I though about naming it as DateField3.5, to stress its transitional nature between Flex 3 and Flex 4 SDK, but because I could not easily make its API working within Flex 3, I’ve upgraded the usage requirements to “can be used with Flex 4 SDK and beyond”.

  • Mark

    JabbyPanda,

    any ideas as to when a Spark DateChooser might be coming along?

  • http://www.jabbypanda.com JabbyPanda

    2 Mark: I have not heard from Adobe any ETA (estimated time of arrival) on this subject :(

    In October 2010 Deepa said the following in Adobe JIRA http://brief.ly/~i0:

    “Though there is no Spark DateField yet, we are working on providing that component in an upcoming release of Flex. We will ensure that this issue is addressed correctly in the Spark DateField component. ”

    And upcoming release of Flex it could be Flex 4.5 or could be Flex 5…

  • Zhenya

    Hi
    Was wondering if you have any date picker that’s mobile compatible?!
    -zhenya

  • Zhenya

    Hi
    Was wondering if you have any date picker that’s mobile compatible?!
    -zhenya

  • Andriy Halyasovskyy

    Hi namesake,
    view source of the demo is not available :(

    Is there any other way to see the usage of the control?

  • Andriy Halyasovskyy

    Hi namesake,
    view source of the demo is not available :(

    Is there any other way to see the usage of the control?

  • Andriy Halyasovskyy

    Hi namesake,
    you have a bug in DateI18nValidator -> validateFormatString() -> Line 251 : there should not be “break” statement after “case “YY” :”

    I fixed it in my project, but it still works incorrectly when I set formatString property to the value with “YY” as year.
    I need to be able to set the formatString to “MM/DD/YY” but in this case current date input (06/30/11) displays 1911 year in the calendar which is obviously wrong.

    Standard mx:DateField displays correct 2011 year with the same input and formatString.

    Can you help fixing this?

  • Andriy Halyasovskyy

    Hi namesake,
    you have a bug in DateUtil -> parseStringToObject() -> Line 129 : there should not be “break” statement after “case “YY” :”

    I fixed it in my project, but it still works incorrectly when I set formatString property to the value with “YY” as year.
    I need to be able to set the formatString to “MM/DD/YY” but in this case current date input (06/30/11) displays 1911 year in the calendar which is obviously wrong.

    Standard mx:DateField displays correct 2011 year with the same input and formatString.

    Can you help fixing this?

  • http://nullptr.us/ Chris Seaton

     Is there an easy way to accept both 2 digit and 4 digit years when validating user input (e.g. 12 & 2012)?
    Also, the hyperlink to the ‘view source’ is broken. I think it would be really useful to see how you implemented this example.

    Many thanks for your effort on this project.

  • http://nullptr.us/ Chris Seaton

     Is there an easy way to accept both 2 digit and 4 digit years when validating user input (e.g. 12 & 2012)?
    Also, the hyperlink to the ‘view source’ is broken. I think it would be really useful to see how you implemented this example.

    Many thanks for your effort on this project.

  • http://nullptr.us/ Chris Seaton

     Please ignore my question about the ‘view source’ being broken. I missed the URI you posted in the comments.

  • http://nullptr.us/ Chris Seaton

     Please ignore my question about the ‘view source’ being broken. I missed the URI you posted in the comments.