PDA

View Full Version : Format DisplayField text as date



mohaaron
26 Jun 2009, 1:06 PM
I need to display the date text that is bound to a DisplayField as a date. Is there anyway to do this? Currently my DisplayField is showing this.

Fri Jun 26 2009 13:34:26 GMT-0700 (Pacific Daylight Time)

I would like it to look like this.

06/26/2009 13:34

Current Code:


xtype: 'displayfield',
fieldLabel: 'Date Modified',
name: 'DateModified',
format: 'MM/dd/yyyy HH:mm'

Keylan
26 Jun 2009, 2:27 PM
Current Code:


xtype: 'displayfield',
fieldLabel: 'Date Modified',
name: 'DateModified',
format: 'MM/dd/yyyy HH:mm'


I don't believe 'displayfield' is a valid xtype (http://extjs.com/deploy/dev/docs/?class=Ext.Component)

Once you decide on a valid xtype, I would use :



xtype: '<new xtype>',
fieldLabel: 'Date Modified',
name: 'DateModified',
renderer: Ext.util.Format.dateRenderer('mm/dd/yy')

Keylan
26 Jun 2009, 2:39 PM
Sorry, wrong docs. http://extjs.com/deploy/ext-3.0-rc2/docs/ shows displayfield as a valid xtype. What I said about the renderer should still be valid.

mohaaron
26 Jun 2009, 3:36 PM
Thanks for the help. I just realized that I forget to add that I'm doing this in a FormPanel field of type DisplayField.

Does it make a difference that it's a FormPanel? It didn't work so I thought this might be the reason.

mohaaron
29 Jun 2009, 8:19 AM
It seems to me that formatting display text would be a common requirement. Is there really no easy way to do this?

SebTardif
12 Sep 2011, 4:17 PM
I agree that format or dateFormat should be a config of displayfield.

mushe
14 Nov 2016, 7:55 PM
This is quite an old thread, but I happened to fall on it when searching for this question.

I found that the renderer of the displayfield should be as follows :

renderer:function(value,displayfield) {
return Ext.util.Format.date(value,"d-m-Y")

}

You could also create your own "date displayfield" :

Ext.define('MyApp.view.lib.DisplayDateField', {
extend: 'Ext.form.field.Display',

alias: 'widget.displaydatefield', //or in stead of alias : xtype:'displaydatefield'

config:{
format:"d-m-Y H:i"


},


renderer:function(pValue,pDisplayField){
return Ext.util.Format.date(pValue,this.format);
}});
and then use this class as xtype (xtype:'displaydatefield' in stead of xtype:'displayfield'). So you have a class with a "format" configuration setting and the solution would become :

xtype: 'displaydatefield',
fieldLabel: 'Date Modified',
name: 'DateModified',
format: 'm/d/Y H:i'
See Ext.util.Format for valid formats.