PDA

View Full Version : Showing full date in date field



sencha-dev2
13 Aug 2012, 6:48 AM
Hi, I wish to show the full parsed date in a datefield. I effectively saw the date was always 01/01/01 for example.

As the application I'm developping targets from the baby to the elders, I might need to show the centuries in addition of what's already shown.

I'd be glad to know if there's a way to show : 01/01/1901.

Thanks in advance.

---------

I searched through documentation but I saw no property which could fit...

Farish
13 Aug 2012, 7:00 AM
you need to set the "format" config of the datefield to show the date how you like it to be shown.

Tim Toady
13 Aug 2012, 7:01 AM
It shows the full year by default. See the live example in the docs. There is a format configuration you can define for alternate formats.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Date-cfg-format

redraid
13 Aug 2012, 7:02 AM
Use format (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Date-cfg-format) config (see supported formats http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Date) -


{
xtype: 'datefield',
format: 'm/d/Y'
}

sencha-dev2
13 Aug 2012, 7:14 AM
Thank you for your quick answers, but I'm already using format config and it doesn't change anything... It desperately remains 01/01/01... :-/

Tim Toady
13 Aug 2012, 7:16 AM
you probably have m/d/y (lowercase Y). If you just delete the format you should be set.

sencha-dev2
13 Aug 2012, 7:19 AM
I'm sorry, but here's my code :


{
xtype: 'datefield',
name: 'dateEffet',
fieldLabel: 'Date d\'effet ',
format: 'd/m/Y',
labelWidth: 120,
width: 379,
allowBlank: false
}


I'm actually using an upper Y... This is why I don't understand...

--------------------------------------

Maybe can help : I set its value with a getForm().setValues(res), res being an xhr answer array-parsed. I use it to fill my form, which this datefield belongs to. Can it be caused by this ? I'd precise when I show my form blank, I set its value with setValue(new Date()). Doesn't change anything though.

Tim Toady
13 Aug 2012, 7:31 AM
Oh I see why you are using format now. The European way makes so much more sense. Is it possible it is getting overridden somewhere? d/m/Y should show it the way you want. In fact I even ran the code you specified just to double check and it works.

Farish
13 Aug 2012, 7:32 AM
take a look at the altFormats config and the example in the API Docs:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Date

your value which you are setting to the datefield should be in one of the formats specified either in the format config or the altFormats config.

Tim Toady
13 Aug 2012, 7:44 AM
Had an idea. Are you using locale? The french locale has the d/m/y format specified. If you are including the locale script after your code it could be your issue.

--Edit
On second thought, I don't think locale would override a format specified on a object config, but I do wonder if it is somehow related. If you are using locale, try removing it temporarily and see if anything changes.

sencha-dev2
13 Aug 2012, 10:46 PM
Thanks again for your answers. What do you mean by locale ? I'm glad to know that my code's right, but it still doesn't work... :(

Farish
13 Aug 2012, 10:51 PM
locale means a language file for displaying default messages/labels etc. in you local language.

sencha-dev2
13 Aug 2012, 10:55 PM
I don't think I'm using this. But my date field is a component of a separate widget, that I call upon in differents views.



Ext.define('Infologis.view.Composants.FormulaireAdresse', {
extend: 'Ext.form.FieldSet',
name: 'coordonneesPostales',
title: 'Coordonnees Postales',
style: {backgroundColor: '#EFEFEF'},
layout: 'vbox',
padding: 5,
alias: 'widget.formulaireAdresse',
height: 250,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
style: {
backgroundImage: 'url(images/icons/AdressePostale.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center top'
},
width: 80,
height: 20
},
{
xtype: 'container',
name: 'coordPostales',
layout: 'vbox',
items: [
{
xtype: 'fieldcontainer',
name: 'adresseStructure',
layout: 'hbox',
items: [
{
xtype: 'textfield',
name: 'numeroVoie',
emptyText: 'Num.',
fieldLabel: 'Adresse ',
enforceMaxLength: true,
maxLength: "4",
width: 160,
labelWidth: 120,
allowBlank: true
},
{
xtype: 'combobox',
name: 'idComplementNumeroRue',
displayField: 'libelleCNR',
valueField: 'idComplementNumeroRue',
queryMode:'local',
store: 'ComplementNumeroRue',
emptyText: 'Bis, Ter...',
hideTrigger: true,
width: 40,
allowBlank: true
},
{
xtype: 'combobox',
name: 'idTypeVoie',
displayField: 'court',
emptyText: 'Rue...',
queryMode:'local',
valueField: 'idTypeVoie',
store: 'TypeVoie',
hideTrigger: true,
width: 40,
allowBlank: true
},
{
xtype: 'textfield',
name: 'nomVoie',
emptyText: 'Nom de la voie',
allowBlank: true,
width: 130
}
]
},
{
xtype: 'fieldcontainer',
name: 'complementAdresseStructure',
items: [
{
xtype: 'textfield',
name: 'complementAdresse',
fieldLabel: 'Complement ',
emptyText: 'ZI, Lieu-dit...',
allowBlank: true,
labelWidth: 120,
width: 379
}
]
},
{
xtype: 'fieldcontainer',
name: 'villeStructure',
layout: 'hbox',
items: [
{
xtype: 'textfield',
name: 'codePostal',
maxLength: "5",
enforceMaxLength: true,
fieldLabel: 'Code Postal / Ville ',
labelWidth: 120,
width: 180,
allowBlank: true,
emptyText: '36000'
},
{
xtype: 'combobox',
name: 'idCommune',
queryMode: 'local',
hideTrigger: true,
minChars: 2,
displayField: 'nomCommune',
valueField: 'idCommune',
store: 'Commune',
allowBlank: false,
emptyText: 'CHATEAUROUX',
width: 196,
listeners: {
select: {
fn: function(cbo, rec) {
var codeP = rec[0].data.codePostal;
cbo.up('fieldcontainer[name="villeStructure"]').down('textfield[name="codePostal"]').setValue(codeP);
}
}
}
}
]
},
{
xtype: 'textfield',
name: 'cedex',
allowBlank: true,
labelWidth: 120,
width: 379,
fieldLabel: 'CEDEX ',
emptyText: 'Cedex + numero boite postale',
listeners: {
blur: {
fn: function(text) {
if(text.value != '' && typeof(text.value) != 'undefined')
text.setValue(text.value.toUpperCase());
}
}
}
},
{
xtype: 'textfield',
name: 'pointRemise',
allowBlank: true,
labelWidth: 120,
width: 379,
fieldLabel: 'Point de remise ',
emptyText: 'i.e. Appartement 25... '
},
{
xtype: 'textfield',
name: 'localisationConstruction',
allowBlank: true,
labelWidth: 120,
width: 379,
fieldLabel: 'Localisation de la construction ',
emptyText: 'i.e. Batiment C...'
},
{
xtype: 'datefield',
name: 'dateEffet',
fieldLabel: 'Date d\'effet ',
format: 'd/m/Y',
labelWidth: 120,
width: 379,
allowBlank: false
}
]
},
{
xtype: 'hidden',
name: 'idAdresse'
}
]
});
me.callParent(arguments);
}
});

Here's the global code of the widget.

Tim Toady
14 Aug 2012, 6:23 AM
Does it have the correct format if you manually click a date in the component dropdown?

sencha-dev2
14 Aug 2012, 7:01 AM
No, it displays it like dd/mm/yy only.

Tim Toady
14 Aug 2012, 7:22 AM
It has to be overridden somewhere. I can take the exact code you posted and it works fine. Is there anywhere else you can think of the format might be changed?

sencha-dev2
15 Aug 2012, 10:54 PM
I'm sorry, I am part of a team, and everyone else is in holiday now. But I didn't configure anything to override this...