Format datepickerfield result.

[milton9480]

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]

Hi guys, any one that can help me on that ?

[milton9480]

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]

Nice solution. But I am a bit surprised fo find that Sencha does not have a dateformat property?

[huypham612]

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.