Flex - format entry of data as it is entered (date field / dates)?

Question

I am using an mx:DateField in Flex and it works nice with the date picker, but I also need it to be editable, so i set editable="true".

The problem is that now the user can enter anything they want - even though I have a formatString="YYYY-MM-DD" set. The date picker honors this format, but if the user enters in the format MM/DD/YYYY they can - or they can even enter garbage data.

I realize I can set up a data validator to check that it is a valid date and in the appropriate format as per the flex docs, but I was hoping to have something I have seen in other languages where the text field would show something like "0000-00-00" and the user clicks in to the field and it allows them to change only the digits (the zeros) and can not type any alpha characters or add/remove any length.

Any ideas?

Answer 1

Try to use masked text input for that.

Answer 2

Personally, I wouldn't use a DateField. I would create a custom component that has 3 separate TextInputs, one for each year, month and day, and have a DateChooser on the right side if the user wants to pick the date manually.

You'll have to add logic to have the focus bounce from one textinput to the next. You can even make them look like they're in the same component with dashes in between. The user thinks it's just one component, but it's actually a composite component.

Anywho, just my 2 cents. I've done it before with good results.