1. #1
    Sencha User maiconschelter's Avatar
    Join Date
    Nov 2008
    Location
    Brazil
    Posts
    15
    Vote Rating
    6
    maiconschelter is on a distinguished road

      1  

    Default MonthField for ExtJS 4.1

    MonthField for ExtJS 4.1


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

    Code:
    /**
     * 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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,532
    Vote Rating
    871
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Nice documentation! One thing, you have initComponent with no custom code in it, you should remove this as it's wasteful.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User maiconschelter's Avatar
    Join Date
    Nov 2008
    Location
    Brazil
    Posts
    15
    Vote Rating
    6
    maiconschelter is on a distinguished road

      1  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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!

  4. #4
    Sencha User
    Join Date
    Oct 2008
    Posts
    3
    Vote Rating
    0
    jwells is on a distinguished road

      0  

    Default


    Works fantastic in 4.1. Thanks for your efforts!

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Location
    Poitiers, France
    Posts
    20
    Vote Rating
    3
    youss.imzourh is on a distinguished road

      0  

    Default


    Brilliant work!

    Thanks dude!

  6. #6
    Sencha User alexfrg's Avatar
    Join Date
    May 2012
    Posts
    8
    Vote Rating
    0
    alexfrg is on a distinguished road

      0  

    Default


    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?

    Code:
    {
                    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          
     }

  7. #7
    Sencha User
    Join Date
    Oct 2008
    Posts
    3
    Vote Rating
    0
    jwells is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User alexfrg's Avatar
    Join Date
    May 2012
    Posts
    8
    Vote Rating
    0
    alexfrg is on a distinguished road

      0  

    Default


    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

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    7
    Vote Rating
    0
    dan5k is on a distinguished road

      0  

    Default error on the 31st

    error on the 31st


    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.

  10. #10
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    Diego Freitas is on a distinguished road

      0  

    Default RESOLVED

    RESOLVED


    The method Ext.Date.createParser has this lines:
    Code:
    "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.

    Code:
    Ext.Date.defaults={    
            d:1 
    };
    
    Ext.application('App'){
    ...