[1.0.1a] DateField fails to invoke custom vtype validator

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>

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.

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? :-?

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

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. ;)

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?

Quote:

Originally Posted by roshniblr

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?

http://extjs.com/docs/?class=Ext.for...ber=altFormats