ExtJS DateField using different display format

Question

I'm using a ExtJS DateField control in an ASP.NET MVC web application.

I've set format property to "Y-m-d", so that it'll correctly parse the "2009-08-11" format from the server, and will also send it back in that format.

However, I'd like to display the data in a different, more user-friendly, format, particularly "d mmm yyyy" in Spanish.

I can't seem figure out how to do this. I don't think the altFormats property is of help, since that just adds more parse formats.

Is it possible to use a different parse format from display format? Or am I going about this the wrong way?

Answer 1

yes. It is possible.

See http://extjs.com/deploy/dev/docs/?class=Date for date formats.

For what can be customised out of the box, see the ext-3.0.0\src\locale\ folder. Include the appropriate file or just customize your own, using on of the files as a template.

For example :

Date.monthNames = [
   "Januar",
   "Februar",
   "Marec",
   "April",
   "Maj",
   "Junij",
   "Julij",
   "Avgust",
   "September",
   "Oktober",
   "November",
   "December"
];

Date.dayNames = [
   "Nedelja",
   "Ponedeljek",
   "Torek",
   "Sreda",
   "Četrtek",
   "Petek",
   "Sobota"
];

console.log((new Date()).format('Y-M-D'))

Regards, Joshua

Answer 2

Hi Tom,

So to clarify my understanding you have a date field that:

1. Needs parsing on a server, in the format Y-m-d
2. You want to display the date in the format d mmm yyyy using Spaninsh month names

My initial reaction, based on my understanding, would be that you could setup your ext date fields to format and validate the second format ('d mmm yyyy') using the format config option (format:'d mmm yyyy'). Then you would send that back to the server, to your controller action (I guess), as a string parameter not a DateTime. Then in your controller action parse the date string and convert it using:

 DateTime.ParseExact(myDate, 'd mmm yyyy',  CultureInfo.CurrentCulture)

or similar and then you can convert it to whatever format you like out of that date object.

This only leaves the abbreviated names in the Date fields in the browser. I'm not entirely sure how Ext handles this but I'm not aware of being able to override the date format and force it to use a specific culture, from Ext / Javascript, so I'd expect that you'd be at the mercy of the browser / OS without writing something yourself.

UPDATED:

Combined with the example given by Joshua for month / day names should give you the solution you are looking for.

I hope that helps.

Answer 3

Actually, the format config is used both for parsing AND to set the display format. As long as altFormats contains all possible data formats that you'd like to support for parsing (the default value includes Y-m-d), you should be able to do something like this:

Ext.onReady(function(){
    new Ext.form.DateField({
     format: 'd F Y', // 'd mmm yyyy' is not valid, but I assume this is close?
     width: 200,
     renderTo: Ext.getBody(),
     value: '2009-08-11'
    });
});

Answer 4

Use custom renderer function to display Spanish format properly.