Solution to this problem is to make enable property 'true' for editing date field direct as input. However, the direct entry in input field raises possibilities of wrong date entry. As client-side validation is key strength of Flex.
Here, I'm trying to cover active date validation of custom date input datefield. Flex validation highlights the field highlighted in Red and developer can add custom validation for alert messages.
Please follow these steps to
1. First add editable="true" in custom DataField
mx:DateField editable="true" showToday="true" id="customDateWithValidation"
2. Add Flex Date Validation
mx:DateValidator source="{customDateWithValidation}" property="text" allowedFormatChars="/" trigger="{customDateWithValidation}" triggerEvent="valueCommit" id="validateCustomDate"
This much will activate the Flex validation and highlight the input field in case of error in Red with error as dataTip.
3. In case developer want to add custom validation, add event with DataField
4. In custom validation method call the alert based on validity of input
protected function validateDate(event:CalendarLayoutChangeEvent):void{
var customDateEvent :ValidationResultEvent = validateCustomDate.validate();
if(customDateEvent.type==ValidationResultEvent.INVALID){
Alert.show("Date must be in MM/DD/YYYY format.");
return;
}
}
All this will help developer to achieve Active Validation. However, I'm thinking in lines of passive validation. In this case, user will enter character accidentally only and its known to user dates can be numeric only and system can ignore passively other character apart from number while entering input itself. I will try to code for passive validation in my next blog.
