Flex DateField / DateChooser Issue

Question

We use the mx:DateField for our Dates and editable="true" so that we can either choose a date or enter it as well. The requirement is that we should not be able to enter more than 10 characters in this field (10/10/2010). But the DateField does not have the maxChars property to restrict that.

So we tried to use a Text Field + DateChooser to restrict the number of characters. Everything works as desired, but the issue is that the DateChooser shows the whole calendar on the page and not as a Calendar icon that will popup a calendar (as DateField).

So now my q is

1) Using the DateField, how can I restrict the number of characters that can be entered in the text field to 10

or

2) Using the DateChooser, how can I change the appearance of it to show a Calendar Icon and then show the calendar as popup on clicking it (similar to DateField).

If anyone can help me on this, that would be wonderful.

Answer 1

Start with something like this:

<s:TextInput click="dc.visible=!dc.visible" maxChars="10" />
<mx:DateChooser id="dc" visible="false" />

From here you just need to handle click events to the date chooser and fill out the textinput appropriately

UPDATE: In attempt to answer your questions from comments

UI:

<s:HGroup>
    <s:TextInput id="dateInput" click="dateInput_clickHandler(event)" maxChars="10" />
    <mx:DateChooser id="dc" visible="false" includeInLayout="false" change="dc_changeHandler(event)" />
</s:HGroup>

Script:

protected function dateInput_clickHandler(event:MouseEvent):void
{
    dc.includeInLayout = !dc.includeInLayout;
    dc.visible = !dc.visible;
}

protected function dc_changeHandler(event:CalendarLayoutChangeEvent):void
{       
    dateInput.text = dateFormatter.format(event.newDate);
    dateInput_clickHandler(null);
}

Declarations:

<mx:DateFormatter id="dateFormatter" formatString="MM/DD/YYYY" />

Hope this helps! -Ian