Flex DateField / DateChooser Issue

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 th开发者_JAVA百科e 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.

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