DateMenu Month/Year Picker

**ninoguba** · 27 Oct 2010 9:50 AM

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);       
      }}
   })

**paffinito** · 28 Oct 2010 3:41 PM

Thanks!!!

**webarnie** · 28 Jan 2011 8:09 AM

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>

**ninoguba** · 31 Jan 2011 10:00 AM

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.

**dstoichev** · 10 Dec 2012 2:34 AM

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"));
            }
        }
    })

DateMenu Month/Year Picker

Thread Tools

Search Thread

Display

DateMenu Month/Year Picker

DateMenu Month/Year Picker

Month/Year datefield

Month/Year datefield

DateField Variant

DateField Variant

Similar Threads

Calendar popup month/year picker rendering problem

[1.1.3] DatePicker next month button hides DateMenu

[2.2 svn 2703][CLOSED]DateMenu (picker) month arrows keep spinning when mouse hovers

Month and year selector

show only month and year

Tags for this Thread