MonthField for ExtJS 4.1

[maiconschelter]

I created this component to select month and year, based on date field.

/**
 * Month field component.
 * @extends Ext.form.field.Date
 * @author Maicon Schelter
 */
Ext.define('Ext.form.field.Month',{

     extend        : 'Ext.form.field.Date'
    ,alias        : ['widget.monthfield']

    /**
     * @cfg {String} format
     * Format date component.
     */
    ,format        : 'm/Y'

   /**
     * Create component picker month.
     * @method createPicker
     * @return {Object}
     * @private
     */
    ,createPicker : function()
    {
        var  me        = this
            ,picker    = me.monthPicker;

        if(!picker)
        {
            me.monthPicker = picker = new Ext.picker.Month({
                 ownerCt    : me.ownerCt
                ,renderTo    : document.body
                ,floating    : true
                ,shadow        : false
                ,small        : me.showToday === false
                ,listeners : {
                     scope            : me
                    ,cancelclick    : me.onCancelClick
                    ,okclick        : me.onOkClick
                    ,yeardblclick    : me.onOkClick
                    ,monthdblclick    : me.onOkClick
                }
            });

            if(!me.disableAnim)
            {
                picker.hide();
                me.isExpanded = false;
            }

            me.on('beforehide', Ext.Function.bind(me.hideMonthPicker, me, [false]));
        }

        return picker;
    }

    /**
     * Click component method.
     * @method onOkClick
     * @param {Object} picker
     * @param {String} value
     * @private
     */
    ,onOkClick : function(picker, value)
    {
        var  me        = this
            ,month    = value[0]
            ,year    = value[1]
            ,date    = new Date(year, month, 1);

        if(date.getMonth() !== month)
        {
            date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1));
        }

        me.activeDate = date = Ext.util.Format.date(date, me.format);
        me.setValue(date);
        me.hideMonthPicker();
    }

    /**
     * Cancel selection and set last value.
     * @method onCancelClick
     * @private
     */
    ,onCancelClick : function()
    {
        this.setValue(this.activeDate);
        this.hideMonthPicker();
    }

    /**
     * Show or hide picker month.
     * @method hideMonthPicker
     * @param {Boolean} animate
     * @return {Object}
     */
    ,hideMonthPicker : function(animate)
    {
        var  me        = this
            ,picker    = me.picker;

        if(picker)
        {
            if(me.shouldAnimate(animate))
            {
                me.runAnimation(true);
            }
            else
            {
                picker.hide();
                me.isExpanded = false;
            }
        }

        return me;
    }

    /**
     * Return animate show or hide component.
     * @method shouldAnimate
     * @param {Boolean} animate
     * @return {Boolean}
     */
    ,shouldAnimate : function(animate)
    {
        return Ext.isDefined(animate) ? animate : !this.disableAnim;
    }

    /**
     * Show or hide picker month animate.
     * @method runAnimation
     * @param {Boolean} isHide
     */
    ,runAnimation : function(isHide)
    {
        var     me        = this
            ,picker    = this.picker
            ,options = {
                 duration : 200
                ,callback : function()
                {
                    if(isHide)
                    {
                        picker.hide();
                        me.isExpanded = false;
                    }
                    else
                    {
                        picker.show();
                        me.isExpanded = true;
                    }
                }
            };

        if(isHide)
        {
            picker.el.slideOut('t', options);
        }
        else
        {
            picker.el.slideIn('t', options);
        }
    }
});

File to download.
Month.zip

[mitchellsimoens]

Nice documentation! One thing, you have initComponent with no custom code in it, you should remove this as it's wasteful.

[maiconschelter]

Nice documentation! One thing, you have initComponent with no custom code in it, you should remove this as it's wasteful.

Ops, sorry, i forgot the initComponent at my code. Code and file are updated.
Thanks!

[jwells]

Works fantastic in 4.1. Thanks for your efforts!

[youss.imzourh]

Brilliant work!

Thanks dude!

[alexfrg]

Worked fine until today (31/05/2012).
When choosing a February date set to March (
Similarly, if you choose to September - is chosen in August, with the remaining months, everything is OK, what could be the reason?

{
                xtype: 'monthfield',
                submitFormat: 'Y-m-d',
                name: 'dat-fld',
                id:'dat-fld',
                anchor: '100%',
                width:140,
                labelWidth:50,
                fieldLabel: "Date",
                format: 'm.Y',
                value:dateMap          
 }

[jwells]

Interesting, I'm seeing the same behavior. My guess is that it's a timezone thing and it will resolve within the next 12 hours.

[alexfrg]

An error does not happen again on June 1.


But tried to put a date on your computer on 31 May and again there was an error: failed to select in February

[dan5k]

This problem can be easily replicated: 1. Change the date on your computer's "Time and Date Settings" to May 31 or any31st day of a month. 2. Close the browser entirely and reopen it. It gets its date setting when thebrowser program starts up, so reopen it to trick the date.3. That's it. You were onto it with the 31st and 30 days in a month problem. Essentially thedatepicker is trying to put that month onto the same day as 'today'...so if youdo it on the 31st, it's hidden day value is a 31 and thus the problem with 30day months. (Or February on the 29th) It occurs on 'blur' because that's when the form field validates itself andrealizes that it's showing a June12 but it's internal value is actuallyJuly1,2012...because there is no June 31...so it corrects itself.

[Diego Freitas]

The method Ext.Date.createParser has this lines:

"dt = Ext.Date.clearTime(new Date);",
....
"d = Ext.Number.from(d, Ext.Number.from(def.d, dt.getDate()));",

dt.getDate() returns the last day of the current month (May has 31) and there is no value defined for def.d and d (the selected day), so dt.getDate() value will prevail.

def is a reference to Ext.Date.defaults and in order to solve this problem i set the default value for day before my application definition.

Ext.Date.defaults={    
        d:1 
};

Ext.application('App'){
...