ExtJS 'datefield' validation override

Question

I needed a datecolumn with some custom behaviour, specifically I needed to be able to enter in a date or and age in the same field (with an age staying rendered as an age and a date staying rendered as a date)

Eg. Entering "23" will leave "23" in the field as a valid value, or entering "22/1/88" will leave "22/1/88" as valid value.

So I tried having a datecolumn with the editor defined like this (note the validate override):

editor: {
    xtype: 'datefield',                                 
    format: 'd/m/Y',                                
    validate: function(){
      if(!this.value.match(SOME_REGEX){         
        if(!this.value.match(SOME_REGEX){
          return false;
        }           
      }             
      return true;
    }                               
}

Chrome debugger shows that the validate event and validation function correctly for dates however, when I try and put in an age (int), after hitting enter the field takes the value and tries to make a date out of it, rendering that guessed date back into the field and THEN validate is called.

The only documented before-validate event that I can find is

stripCharsRe

that defaults to NULL.

Can anyone shed any light on this?

Answer 1

In this case, I would suggest you use/configure a TextField as the editor component and write a custom validator (just like in your snippet) to validate the values.

(I know this does not answer your question directly but your current approach is going to be riddled with issues due to the fact that DateField is built to handle Date objects)

EDIT -

If Date Picker is a must, use TriggerField as your base component and on its onTriggerclick, display a DatePicker. (You will have to set a handler function that will be called when user selects a date using this picker. See DatePicker.handler config option)