ExtJS DateField Formatting Format

Question

I am using Ext.form.DateField with the specified format: 'dm-Y', for example:

var sellingDate = new Ext.form.DateField({ fieldLabel : "Selling date", width : 180, name: 'sellingDate', format: 'dm-Y', allowBlank : false }); 

I want this component to automatically execute an input value with a given format after losing focus. I mean, if I enter the text “040212” ( February 4, 2012 ), in my country we use “dd-mm-YYYY” as the standard date format), it should display this text as '04 -02 -2012 .
But when debugging on the event "change" of DateField, I see that the processed Date object is "Mon Apr 02 2012 ". I do not know how to make it work, as I expect above. Is there a way to get the source text from a date field and not a processed Date object? Could you help me with this? Thank you very much!

Answer 1

It's simple, add the altFormats configuration option:

altFormats: String Multiple date formats separated by "|" try when parsing user input value and does not match a specific format

 //So in your case, it should be 'dmy' var sellingDate = new Ext.form.DateField({ fieldLabel : "Selling date", width : 180, name: 'sellingDate', format: 'dm-Y', altFormats: 'dmy', allowBlank : false }); 

Answer 2

Ext seems to parse any six-digit string as mmddyy no matter what format you specify. This is unfortunate: - /

The logic for parsing dates is found in the beforeBlur method Ext.form.field.Date or ( Ext.form.DateField in ExtJS 3). You can "intercept" this method and perform your own raw value massage before it analyzes the date:

 Ext.onReady(function (){ (function (){ // capture the original method so we can call it later var originalBeforeBlur = Ext.form.field.Date.prototype.beforeBlur; Ext.override(Ext.form.field.Date, { beforeBlur: function (){ var raw = this.getRawValue(), match = raw.match(/^\s*(\d{2})(\d{2})(\d{2})\s*$/); // rearrange the date string to match what Ext expects if (match){ raw = match[2] + match[1] + match[3]; } this.setRawValue(raw); originalBeforeBlur.call(this); } }); })(); var panel = new Ext.form.FormPanel({ title: "Enter a Date", renderTo: Ext.getBody(), items: { xtype: "datefield", format: "dmY" } }); });