1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    48
    Vote Rating
    0
    ninoguba is on a distinguished road

      0  

    Default DateMenu Month/Year Picker

    DateMenu Month/Year Picker


    Hi. I just want to share the following code to change the behavior of the DateMenu so that it allows the user to pick only the Month and Year bypassing the Date selection. This is implemented not as a plugin or extension for simplicity. Hope developers will find this useful.

    I tested this on IE8 and Chrome and it works. I'm assuming it will work on FF3 as well. Let me know if you find issues.

    -Nino

    Code:
          
       new Ext.menu.DateMenu({
         listeners: { show: function(){
           this.picker.showMonthPicker();
                    this.picker.mon(this.picker.monthPicker, 'click', function(e, t){
                  e.stopEvent();
                  var el = new Ext.Element(t), pn;
                  if(el.is('button.x-date-mp-cancel')){
                      this.picker.hideMonthPicker();
             this.hide();
                  }
                  else if(el.is('button.x-date-mp-ok')){
                      var d = new Date(this.picker.mpSelYear, this.picker.mpSelMonth, (this.picker.activeDate || this.picker.value).getDate());
                      if(d.getMonth() != this.picker.mpSelMonth){                
                          d = new Date(this.picker.mpSelYear, this.picker.mpSelMonth, 1).getLastDateOfMonth();
                      }
                      this.picker.update(d);
                      this.picker.hideMonthPicker();
                      this.picker.setValue(d);
                      this.picker.fireEvent('select', this.picker, this.picker.value);
                  }
              }, this);
                    this.picker.mon(this.picker.monthPicker, 'dblclick', function(e, t){
                  e.stopEvent();
                  var el = new Ext.Element(t), pn;
                  if((pn = el.up('td.x-date-mp-month', 2))){
             var d = new Date(this.picker.mpSelYear, pn.dom.xmonth, (this.picker.activeDate || this.picker.value).getDate());
                      this.picker.update(d);
                      this.picker.hideMonthPicker();
                      this.picker.setValue(d);
                      this.picker.fireEvent('select', this.picker, this.picker.value);
                  }
                  else if((pn = el.up('td.x-date-mp-year', 2))){
             var d = new Date(pn.dom.xyear, this.picker.mpSelMonth, (this.picker.activeDate || this.picker.value).getDate());
                      this.picker.update(d);
                      this.picker.hideMonthPicker();
                      this.picker.setValue(d);
                      this.picker.fireEvent('select', this.picker, this.picker.value);
                  }
              }, this);       
          }}
       })

  2. #2
    Sencha User paffinito's Avatar
    Join Date
    Oct 2009
    Location
    Italy
    Posts
    14
    Vote Rating
    0
    paffinito is on a distinguished road

      0  

    Default


    Thanks!!!

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Location
    Lincoln RI
    Posts
    97
    Vote Rating
    0
    webarnie is on a distinguished road

      0  

    Default Month/Year datefield

    Month/Year datefield


    Thank you so much for pointing me to your example. I had to change the code a bit for what i am working on. The listener is not working and i'm sure its what I've done, but do not see it. Could you help me and let me know what I am doing wrong? Thenak you.

    Code:
    <?
    xmlversion="1.0"encoding="UTF-8"?> <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
    <title>MonthPicker</title>
    <linkrel="stylesheet"href="/ext3/resources/css/ext-all.css"></link>
    <linkrel="stylesheet"href="/ext3/examples/calendar/resources/css/examples.css"></link>
    <scripttype="text/javascript"src="/ext3/adapter/ext/ext-base-debug.js"></script> <scripttype="text/javascript"src="/ext3/ext-all-debug.js"></script>
    <scripttype="text/javascript"src="/ext3/examples/shared/examples.js"></script>
    </head>
    <body>
    <scripttype="text/javascript">
    Ext.onReady(
    function() { Ext.BLANK_IMAGE_URL = '/ext3/resources/images/default/s.gif'; Ext.QuickTips.init(true); var w = new Ext.Window({ width: 400, height: 300, title: 'MonthPicker', layout: 'fit', padding: 5, closable: false, items: { xtype: 'form', unstyled: true, monitorValid: true, items: [{ xtype: 'textfield', id: 'tbDummy1', fieldLabel: 'Dummy1'
    }, { xtype:
    'datefield', id: 'dtMonth', fieldLabel: 'Choose month', format: 'M Y', editable: false, readOnly: false, listeners: { show: function(){ this.picker.showMonthPicker(); this.picker.mon(this.picker.monthPicker, 'click', function(e, t){ e.stopEvent(); var el = new Ext.Element(t), pn; if(el.is('button.x-date-mp-cancel')){ this.picker.hideMonthPicker(); this.hide(); } elseif(el.is('button.x-date-mp-ok')){ var d = new Date(this.picker.mpSelYear, this.picker.mpSelMonth, (this.picker.activeDate || this.picker.value).getDate()); if(d.getMonth() != this.picker.mpSelMonth){ d = new Date(this.picker.mpSelYear, this.picker.mpSelMonth, 1).getLastDateOfMonth(); } this.picker.update(d); this.picker.hideMonthPicker(); this.picker.setValue(d); this.picker.fireEvent('select', this.picker, this.picker.value); } }, this); this.picker.mon(this.picker.monthPicker, 'dblclick', function(e, t){ e.stopEvent(); var el = new Ext.Element(t), pn; if((pn = el.up('td.x-date-mp-month', 2))){ var d = new Date(this.picker.mpSelYear, pn.dom.xmonth, (this.picker.activeDate || this.picker.value).getDate()); this.picker.update(d); this.picker.hideMonthPicker(); this.picker.setValue(d); this.picker.fireEvent('select', this.picker, this.picker.value); } elseif((pn = el.up('td.x-date-mp-year', 2))){ var d = new Date(pn.dom.xyear, this.picker.mpSelMonth, (this.picker.activeDate || this.picker.value).getDate()); this.picker.update(d); this.picker.hideMonthPicker(); this.picker.setValue(d); this.picker.fireEvent('select', this.picker, this.picker.value); } }, this); }}}, { xtype: 'datefield', id: 'dtMonth2', fieldLabel: 'Regular picker', format: 'M Y', editable: false, readOnly: false
    }, { xtype:
    'textfield', id: 'tbDummy2', fieldLabel: 'Dummy2'
    }], buttons: [{ text:
    'Save', id: 'btnSubmit', formBind: true, handler: function() { if ('dtMonth value', this.ownerCt.ownerCt.items.item('dtMonth').getValue()) { Ext.example.msg('getValue().format(\'m/Y\')', this.ownerCt.ownerCt.items.item('dtMonth').getValue().format('m/Y')); } } }], listeners: { afterrender: function() { this.items.item('tbDummy1', true); var nav = new Ext.KeyMap(this.getEl(), { key: Ext.EventObject.ENTER, fn: this.buttons[0].handler, scope: this.buttons[0] }); } } }, listeners: { show: function() { this.items.item(0).items.item(0).focus(false, 250); } } }); w.show(); }); </script>
    <scripttype="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script>
    <scripttype="text/javascript">
    var pageTracker = _gat._getTracker("UA-3507977-1"); pageTracker._initData(); pageTracker._trackPageview(); </script>
    </body> </html>

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    48
    Vote Rating
    0
    ninoguba is on a distinguished road

      0  

    Default


    Notice I modified the behavior of DateMenu. This is not exactly the same as DateField. Notice I use a lot of this.picker in my code. If you are using DateField, then you should replace it with this.menu.picker. Try it and hope it helps.

  5. #5
    Sencha User
    Join Date
    Oct 2008
    Posts
    1
    Vote Rating
    0
    dstoichev is on a distinguished road

      0  

    Default DateField Variant

    DateField Variant


    Thank you, ninoguba.
    This does the trick for DateField. I'm not interested in day of month, so the picker is set always to first of month.

    Code:
    Ext.ux.MonthYearPicker = Ext.extend(Ext.form.DateField, {
        initComponent:function() {
            Ext.apply(this, {
                monthPickerHasTheListeners: false            
            });
            Ext.ux.MonthYearPicker.superclass.initComponent.apply(this, arguments);        
        },
        
        onTriggerClick: function() {
            Ext.ux.MonthYearPicker.superclass.onTriggerClick.apply(this, arguments);
            this.showMonthYear();
        },
        
        setNewValue: function(date) {
            var picker = this.menu.picker;
            picker.update(date);
            picker.hideMonthPicker();
            picker.setValue(date);
            picker.fireEvent('select', picker, picker.value);
        },
        
        showMonthYear: function() {
            var picker = this.menu.picker,
                firstOfMonth = 1;
            picker.showMonthPicker();
            if (!this.monthPickerHasTheListeners) {
                picker.mon(picker.monthPicker, 'click', function(e, t) {
                    e.stopEvent();
                    var el = new Ext.Element(t), pn;
                    if (el.is('button.x-date-mp-cancel')) {
                        picker.hideMonthPicker();
                        this.menu.hide();
                    } else if (el.is('button.x-date-mp-ok')) {
                        var d = new Date(picker.mpSelYear, picker.mpSelMonth, firstOfMonth);                    
                        this.setNewValue(d);
                    }
                }, this);
                
                picker.mon(picker.monthPicker, 'dblclick', function(e, t) {
                    e.stopEvent();
                    var el = new Ext.Element(t), pn;
                    if ((pn = el.up('td.x-date-mp-month', 2))) {
                        var d = new Date(picker.mpSelYear, pn.dom.xmonth, firstOfMonth);
                        this.setNewValue(d);
                    } else if ((pn = el.up('td.x-date-mp-year', 2))) {
                        var d = new Date(pn.dom.xyear, picker.mpSelMonth, firstOfMonth);
                        this.setNewValue(d);
                    }
                }, this);
                
                this.monthPickerHasTheListeners = true;
            }
        }    
    });
    Usage:
    Code:
    ...new Ext.ux.MonthYearPicker({
            width : 113,
            format : 'F, Y',
            listeners : {
                select : function(me, date) {
                    console.debug(date.format("Y-m-d H:i:s"));
                }
            }
        })

Similar Threads

  1. Calendar popup month/year picker rendering problem
    By frrogoy in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 29 Sep 2010, 11:40 AM
  2. [1.1.3] DatePicker next month button hides DateMenu
    By Alex.Leshkin in forum Ext GWT: Bugs (1.x)
    Replies: 0
    Last Post: 13 Nov 2008, 1:06 AM
  3. Replies: 2
    Last Post: 29 Oct 2008, 7:15 AM
  4. Month and year selector
    By vizcano in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 25 Sep 2008, 12:06 AM
  5. show only month and year
    By forgetdavi in forum Community Discussion
    Replies: 2
    Last Post: 30 Aug 2007, 5:46 AM

Thread Participants: 3

Tags for this Thread