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?

Amol Katdare · Accepted Answer · 2011-04-17T15:11:43.163

2

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)

edited Apr 17 '11 at 15:11

answered Apr 17 '11 at 14:38

Amol Katdare

6,740
2
33
36

1

Agreed. You'd have to also override parseDate and possibly other stuff that would likely get overly complex. (Although I question the usability of a field that doubles as a date field and a number field to begin with, but that's a different question.) – Brian Moeskau Apr 17 '11 at 14:51
@bmoeskau Agree about usability, but design wasn't my call. – Luke Mcneice Apr 17 '11 at 14:59
@amoi Thanks for the suggestion but the calendar picker button is an absolute must. I might just kick back to design and have two fields. Or use a textfield and have an actioncol pop a calendar picker. Thanks – Luke Mcneice Apr 17 '11 at 15:01
1

@Luke - you CAN have a date picker popup on textfield using triggerfield instead of textfield. answer edited to reflect this. – Amol Katdare Apr 17 '11 at 15:12

ExtJS 'datefield' validation override

1 Answers1

Linked