Flex DateField validate date with Editable = True

Question

We have a Datefield component with Editable = true

<mx:DateField id="startDate"  
                                  width="120"
                                  editable="true"
                                  formatString="MM/DD/YYYY"
                                  selectableRange="{{rangeStart : new Date(2010,0,1), rangeEnd : new Date()}}"
                                  showToday="true"
                                  labelFunction="formatDate" 
                                  restrict="[0-9] '\/'" change="startDate_clickHandler(event)"
                                  yearNavigationEnabled="true" 
                                  text="{}" tabIndex="15" />

The Calendar has everything we want (able to choose a valid date only after 01/01/2010). Now the issue is that if the user enters (Editable = true) an invalid date or any date < 01/01/2010, how can i validate that and show an alert saying that the date is invalid. Please any help on this would be appreciated.

Thanks

Harish

Answer 1

You can do it in following way.

• If user specifies does not specify anything (or spaces), then it treats it as if user wants to clear the selected date.
• If user specifies an invalid date, then it falls back to today's date. You can also change this logic to alert the user about invalid date by setting the errorString poperty of the DateField component.
• For a date before range start date, it falls back to range start date.
• For a date after range end date, it falls back to range end date.

<fx:Script>
    <![CDATA[
        import mx.controls.DateField;
        import mx.utils.StringUtil;

        private function parseStartDate(valueString:String, inputFormat:String):Date
        {
            if (StringUtil.trim(valueString) == "")
                return null;

            var date:Date = DateField.stringToDate(valueString, inputFormat);
            if (date == null)
                date = new Date(startDate.selectableRange.rangeEnd.time);
            else if (date.time < startDate.selectableRange.rangeStart.time)
                date = new Date(startDate.selectableRange.rangeStart.time);
            else if (date.time > startDate.selectableRange.rangeEnd.time)
                date = new Date(startDate.selectableRange.rangeEnd.time);
            return date;
        }
    ]]>
</fx:Script>

<mx:DateField id="startDate"
    width="120"
    selectableRange="{{rangeStart : new Date(2010,0,1), rangeEnd : new Date()}}"
    showToday="true"
    yearNavigationEnabled="true"
    parseFunction="parseStartDate"
    editable="true"
    formatString="MM/DD/YYYY"
    restrict="[0-9/]"/>

Answer 2

The DateField component has a "dataChange" event that you can listen to. So you can attach a handler to that event and do the validation as required.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/DateField.html#event:dataChange

Answer 3

The DateField component has a valueCommit event that you can listen to. So you can attach a handler to that event and do the validation as required.

Answer 4

Maybe you could try a different aproach after seeing all this great examples

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html#WS2db454920e96a9e51e63e3d11c0bf69084-7db3