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.

Ian T · Accepted Answer · 2011-02-01T16:25:43.747

2

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

edited Feb 01 '11 at 16:25

answered Jan 31 '11 at 20:21

Ian T

761
4
7

Thanks for your reply Totec. Appreciate it. This works, but then we need to show an icon (or something similar) next to the text field, so that the users will know they have to click on it to show the calendar and also edit the date field as well. Any ideas on that? – Harry Jan 31 '11 at 20:28
@Harish: Create a custom skin for your TextInput based on the default skin and add your icon. – Wade Mueller Jan 31 '11 at 21:02
I agree with wade. Create a custom skin for TextInput. Under the section (on the bottom) after the RichEditableText component add an image for the calendar icon. – Ian T Jan 31 '11 at 21:16
Ok, I can live without an Calendar icon. But now I have another issue. The DateChooser occupies a lot of space below the Text Box (visible = false, but it still needs space to hold the DateChooser component) and it looks awkward when there are 3-4 date fields in a form. So is there any way to collapse the DateChooser when it is not visible or to show it as a Popup? so that it does not use up the space following the Text Field? – Harry Feb 01 '11 at 00:50
Awesome Ian. Simple. Thanks. 1 more issue. Once I click the TextField, the calendar appears below that, but it appears cluttered (behind other components), as there are other components (Text Fields). Is there a way to show the Calendar on Top of other components? – Harry Feb 01 '11 at 15:50

Flex DateField / DateChooser Issue

1 Answers1