[1.0.1a] DateField fails to invoke custom vtype validator

**mystix** · 15 May 2007 3:39 AM

From what i gather from this thread, specifying a custom vtype (like in here) for a DateField should work because DateField calls

Code:

if(!Ext.form.DateField.superclass.validateValue.call(this, value)){
     return false;
}

but it doesn't seem to be invoking the associated custom validation method.

My custom vtype follows:

Code:

Ext.apply(Ext.form.VTypes, {
  mydateMask : /[\d\/]/, // only allow numbers and '/' in date fields
  mydateText : "Date must be in DDMMYY, DD/MM/YY<br>or DD/MM/YYYY format",
  mydate : function(v) {
    var pd = Date.parseDate(v, 'dmy') || Date.parseDate(v, 'd/m/y') || Date.parseDate(v, 'd/m/Y');
    return (pd != null && (v.length == 6 || v.length == 8 || v.length == 10));
  }
});

When specifying vtype: 'mydate' in the DateField config, the mask mydateMask and invalidText mydateText are correctly applied, but the mydate validator is never called, and the default DateField format: 'm/d/y' and validator are used instead.

Also, when the above custom vtype is used, entering exactly 6 characters (digits only) causes the invalid field QuickTip to display the default DateField invalidText i.e. "{0} is not a valid date - it must be in the format {1}". Entering any other combination of digits and slashes (i.e. '/') will display the custom invalidText mydateText.

A complete test case follows:

HTML Code:

<html>
<head>
  <title>DateField vtype test case</title>
  <link rel='stylesheet' href='ext-all.css'>

  <script src='yui-utilities.js'></script>
  <script src='ext-yui-adapter.js'></script>
  <script src='ext-all-debug.js'></script>
  <script>
    Ext.apply(Ext.form.VTypes, {
      mydateMask : /[\d\/]/, // only allow numbers and '/' in date fields
      mydateText : "Date must be in DDMMYY, DD/MM/YY<br>or DD/MM/YYYY format",
      mydate : function(v) {
        var pd = Date.parseDate(v, 'dmy') || Date.parseDate(v, 'd/m/y') || Date.parseDate(v, 'd/m/Y');
        return (pd != null && (v.length == 6 || v.length == 8 || v.length == 10));
      }
    });
    Ext.onReady(function() {
      Ext.QuickTips.init();
      var df = new Ext.form.DateField({
        menu: new Ext.menu.DateMenu(), // all DateFields will share the same DateMenu instance
        allowBlank: true,
        vtype: 'mydate'
      });
      df.applyTo('myText');
    });
  </script>
</head>
<body>
  <input type='text' id='myText' value=''/>
</body>
</html>

**jack.slocum** · 15 May 2007 7:46 AM

You can't use vtypes to bypass the date field's date parsing/format logic. It will be parsing and formatting based on it's date format, not the one in your vtype.

**mystix** · 15 May 2007 8:23 AM

ah i see...

i thought i could bypass the DateField's parsing / format logic cos i got this from the docs for DateField:

Code:

vtype
vtype : String
A validation type name as defined in Ext.form.VTypes (defaults to null)
This config option is defined by TextField.

i guess i'll just have to extend the DateField class to add custom parsing / formatting logic then.

question: what's the vtype config option in DateField supposed to be used for?

**jack.slocum** · 15 May 2007 11:16 AM

For validation, not for date parsing. E.g. comparing the date to another field's value maybe? I'm not sure, but someone will find a use for it.

To implement custom parsing/formatting there are two functions abstracted on their own to make it easy: formatDate and parseDate

**mystix** · 15 May 2007 8:24 PM

alritey jack, thanks for the tip once again

managed to accomplish the desired effect using:

Code:

var df = new Ext.form.DateField({
  menu : new Ext.menu.DateMenu(),
  allowBlank : true,
  maskRe : /[\d\/]/, // only allow numbers and '/'
  invalidText : [
    "Date must be in <ul>",
    "<li>- DDMMYY</li>",
    "<li>- DD/MM/YY</li>",
    "<li>- or DD/MM/YYYY</li>",
    "</ul>format"
  ].join(""),
  format : 'd/m/Y',
  parseDate : function(v) {
    return (!v || v instanceof Date) ?
      v : ((v.length == 6 || v.length == 8 || v.length == 10) 
           && (Date.parseDate(v, 'dmy') || Date.parseDate(v, 'd/m/y') || Date.parseDate(v, 'd/m/Y')));
  }
});

i've also submitted a bug in the missing docs thread regarding DateField's parseDate and formatDate functions.

**roshniblr** · 5 Nov 2009 4:01 AM

Hi ,

I want to restrict any other format other than m/d/y and d/m/y.
But if I use
parseDate : function(v) {
return (!v || v instanceof Date) ?
v : (Date.parseDate(v, 'm/d/y')||Date.parseDate(v, 'd/m/y'));
},
then if i set format as d/m/y, and select the date as 08/07/09, then in the popup calendar 8 should be highlighted instead its highlighting 07

.
How to handle this?

[1.0.1a] DateField fails to invoke custom vtype validator

Thread Tools

Search Thread

Display

Hybrid View

[1.0.1a] DateField fails to invoke custom vtype validator

[1.0.1a] DateField fails to invoke custom vtype validator