ExtJS DateField confuse format

Question

I use Ext.form.DateField with specified format is 'd-m-Y', like this:

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

I want this component to complete the input value automatically with given format after it lost focus. I mean if I input the text '040212' (February 4th 2012, in my country we use 'dd-mm-YYYY' as standard date format), it must display that text as '04-02-2012'.
But when debugging at event "change" of DateField, I see that the parsed Date object is "Mon Apr 02 2012". I don't know how to make it work as I expect above. Is there any way to get the raw text from date field, not a parsed Date object? Could you please help me on this?
Thank you so much!

Answer 1

That's simple, add the altFormats config option:

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

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

Answer 2

It looks like Ext parses any six-digit string as mmddyy regardless of the format you specify. That's unfortunate :-/

The logic for parsing the date occurs in the beforeBlur method of Ext.form.field.Date or (Ext.form.DateField in ExtJS 3). You can "intercept" that method and perform your own massaging of the raw value before it parses 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: "d-m-Y"
    }
  });
});