Flex Examples
The following example shows how you can format the displayed date in a DateField control by setting the labelFunction property and creating a custom label function.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/12/setting-a-custom-label-function-on-a-flex-datefield-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function dateField_labelFunc(item:Date):String {
if (item == null) {
return "";
}
return item.toDateString();
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:DateField id="dateField"
labelFunction="dateField_labelFunc" />
</mx:ApplicationControlBar>
<mx:Label text="{dateField.text}"
selectable="true"
fontSize="48"
fontWeight="bold" />
</mx:Application>
View source is enabled in the following example.
Well, it looks like I’m repeating entries (gasp!). I already did an entry on this several months back, “Formatting dates using the DateFormatter”.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Peter,
I’m having trouble when using the labelFunction and the DateField has editable set to true. I also have a parseFunction to handle the reverse of the labelFunction.
The problem comes not from using the date picker, but rather when typing in dates. If I type in a valid date then everything is fine. It’s when I type in an invalid date, the parseFunction throws back a “1/0/NaN”.
I’m cool with that, but what is escaping me is how to capture the fact that it’s failed and just return null or the date that was previously selected. A try catch inside the parseFunction doesn’t seem to work and the method only has the value and input format as parameters.
I’ve also attempted to use the DateValidator, but it’s having problems certain date formats in this scenario. There just don’t seem to be any examples of using all of these controls together when you have a product that has to support multiple ( international ) date formats.
Really I’m just looking for a way to use the labelFunction with an editable DateField ( formatString will not work for me because it doesn’t support “M/D/YYYY” ), and on an incorrectly entered date, capture the failure and set the date back to what it was.
Brixel,
Can you file a bug at http://bugs.adobe.com/flex/ and post the bug number here so a few people here can vote and track the issue? Also, if you could attach a simple, reproducible test case to the bug report that would help a lot.
I’ll try and play around with this later tonight when I get some time and see if I can find out what is going on.
Thanks,
Peter
Peter,
I’ve created https://bugs.adobe.com/jira/browse/SDK-15448 with an attached sample.
Brixel,
Great, thanks! It looks like you already have a workaround, but this should also “fix” the issue.
private function ParseFunction( valueString:String, inputFormat:String ):Date { var dateStr:String = dateFormat.format( valueString ); var d:Date = new Date( dateStr ); if ( dateFormat.error || isNaN( d.time ) ) { return dateField.selectedDate; } return d; }Let me know if that works and we can update the bug with the workaround/solution.
Thanks,
Peter
Peter,
That sort of works, but there are a few issues with that solution.
1. It assumes you have only one DateField, it would be nice to create a generic pareseFunction. Seems like it should have a reference to whom is issuing the command, maybe an enhancement?
2. The selectedDate it returns to the control isn’t always what the user began with before typing. Let’s say for example that your control starts with todays date “05/02/2008″. Then you start typing a new “days” value of 46, which would be invalid, but as your typing the parseFunciton is firing and returning a date on each key stroke, so the last known good date becomes “05/04/2008″ instead of what the user started with before attempting to make a change.
I’m not sure there is a good way to handle issue 2 outside of storing the date when the control receives focus, and setting it back to that value on error.