PDA

View Full Version : Format datepickerfield result.



milton9480
12 Sep 2011, 4:50 AM
Hi guys,

I'd like to know how to format the result of a datepickerfield, to leave the text as mmm dd, yyyy (ie September 12, 2011).
I've tried different approaches found in the web, but without luck.
Here is my current code, and after a date is picked (also at start because I'm setting today as default), the date text field shows in mm/dd/yyyy format.


{ id: 'id_dateField',
xtype: 'datepickerfield',
dateformat: 'F j, Y',
type: 'date',
value: {
day: Date.today().getDate(),
month: Date.today().getMonth() + 1,
year: Date.today().getFullYear()
},
picker: {
doneButton: 'Search',
slotOrder: ['month', 'day', 'year'],
useClearIcon: true,
hideOnMaskTap: true,
},
name : 'date',
label: 'Date',
inputCls: 'inputRightAligned'
}

Tks in advance!
Regards,
Milton Rodriguez

milton9480
21 Sep 2011, 3:10 AM
Hi guys, any one that can help me on that ?

milton9480
21 Sep 2011, 10:01 AM
Well, sadly I've not found an answer in the forum, and nobody answer my question, so, doing more researches and mixing between Ext.js, sencha and others resources found in internet, plus some creativity, I've a very simple solution. Just add listeners to the datepickerfield for change and afterrender events (last one for initial date) and set the dom element value with the picker value parsed.
At the end, the form item must looks like the following:


{
xtype: 'datepickerfield',
name: 'date',
label: 'Date',
inputCls: 'inputRightAligned',
value: {
day: Date.today().getDate(),
month: Date.today().getMonth() + 1,
year: Date.today().getFullYear()
},
picker: {
slotOrder: ['month', 'day', 'year'],
useClearIcon: true,
hideOnMaskTap: true,
doneButton: 'Search'
},
listeners: {
afterrender: function() {
this.fieldEl.dom.value = this.getValue().toString("MMMM d, yyyy");
},
change: function() {
this.fieldEl.dom.value = this.getValue().toString("MMMM d, yyyy");
}
}
}

Materix
28 May 2012, 1:05 PM
Nice solution. But I am a bit surprised fo find that Sencha does not have a dateformat property?

huypham612
23 Sep 2012, 11:44 PM
Hi, this is another simple solution to format datepickerfield result as provided here http://docs.sencha.com/touch/2-0/#!/api/Ext.Date

var formValues = form.getValues();
var dt = new Date(formValues.birthday); //birthday is the datepickerfield result
dt = Ext.Date.format(dt,'F d, Y') ;

Have fun coding.