EXT4: monthfield with month picker for Extjs4

[jimmylu98]

I extend datafield to create monthfield. It will have month picker and display month ( or date - first date of the picked month ).

Ext.define('Ext.form.field.Month', {
    extend:'Ext.form.field.Date',
    alias: 'widget.monthfield',
    requires: ['Ext.picker.Month'],
    alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],
    selectMonth: null,
    createPicker: function() {
        var me = this,
            format = Ext.String.format;
        return Ext.create('Ext.picker.Month', {
            pickerField: me,
            ownerCt: me.ownerCt,
            renderTo: document.body,
            floating: true,
            hidden: true,
            focusOnShow: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: { 
        select:        { scope: me,   fn: me.onSelect     }, 
        monthdblclick: { scope: me,   fn: me.onOKClick     },    
        yeardblclick:  { scope: me,   fn: me.onOKClick     },
        OkClick:       { scope: me,   fn: me.onOKClick     },    
        CancelClick:   { scope: me,   fn: me.onCancelClick }        
            },
            keyNavConfig: {
                esc: function() {
                    me.collapse();
                }
            }
        });
    },
    onCancelClick: function() {
        var me = this;    
    me.selectMonth = null;
        me.collapse();
    },
    onOKClick: function() {
        var me = this;    
    if( me.selectMonth ) {
               me.setValue(me.selectMonth);
            me.fireEvent('select', me, me.selectMonth);
    }
        me.collapse();
    },
    onSelect: function(m, d) {
        var me = this;    
    me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]);
    }
}); 

To use it:

      xtype: 'monthfield',
      format: 'F, Y',  
      value: new Date() 

[raider]

Good job guys

[khmurach]

Should it submit day=1?
Demo here http://ext4all.com/post/ext4-monthfi...ker-for-extjs4

[kalchas]

Hi guys,
Thank you very much for this excellent picker. I use it in an ext js 4 application, which I have localized in the greek language (see the localisation file). I figured out, that the picker without localisation works perfectly. Note that I have chosen the format 'F, Y' for the picker. With the localisation, I pick a month-year, the picker selects the correct month-year, and when I click out of the picker, the year remains correct but the month changes to its original value. Now I use the format 'm/Y' that works. I noticed that
if I comment out the line: monthNames : Ext.Date.monthNames,
in the ext-lang-el_GR.js file, it works ok, showing the months in English.
if(Ext.picker.Date){
Ext.apply(Ext.picker.Date.prototype, {
todayText : "Σήμερα",
minText : "Η Ημερομηνία είναι προγενέστερη από την παλαιότερη αποδεκτή",
maxText : "Η Ημερομηνία είναι μεταγενέστερη από την νεότερη αποδεκτή",
disabledDaysText : "",
disabledDatesText : "",
monthNames : Ext.Date.monthNames,
dayNames : Ext.Date.dayNames,
nextText : 'Επόμενος Μήνας (Control+Δεξί Βέλος)',
prevText : 'Προηγούμενος Μήνας (Control + Αριστερό Βέλος)',
monthYearText : 'Επιλογή Μηνός (Control + Επάνω/Κάτω Βέλος για μεταβολή ετών)',
todayTip : "{0} (ΠΛήκτρο Διαστήματος)",
format : "d/m/y"
});
}

I also tried to change a format of a normal datepicker, to 'F, Y'. That is, I chose a date and the result was ok, (month Year). When I clicked out of the datepicker, the values remained unchanged.
Thanks in advance,
Harry

[shawon]

Hey in ExtJS 4.1 RC1 the picker is not showing the "Ok" and "Cancel" button text. Can any one help me on this?

[maiconschelter]

Hey in ExtJS 4.1 RC1 the picker is not showing the "Ok" and "Cancel" button text. Can any one help me on this?

Found here: http://www.sencha.com/forum/showthre...Field&p=781724

[shawon]

thanks maiconschelter,
it resolved the issue.

[alexfrg]

In this example ( http://ext4all.com/post/ext4-monthfi...ker-for-extjs4 ),you can not selectin February- the dateis reset toMarch
Thisbugasitdepends on the currentdate (lastnedaleeverything workedOK)

[dr-dan]

DELETED

[mjhaston]

Super helpful. Thank you!