PDA

View Full Version : 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



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.




<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>MonthPicker</title>

<link rel="stylesheet" href="/ext3/resources/css/ext-all.css"></link>

<link rel="stylesheet" href="/ext3/examples/calendar/resources/css/examples.css"></link>

<script type="text/javascript" src="/ext3/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/ext3/ext-all-debug.js"></script>

<script type="text/javascript" src="/ext3/examples/shared/examples.js"></script>

</head>

<body>

<script type="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();
}
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);
}}}, {
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>


<script type="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>

<script type="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.


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:

...new Ext.ux.MonthYearPicker({
width : 113,
format : 'F, Y',
listeners : {
select : function(me, date) {
console.debug(date.format("Y-m-d H:i:s"));
}
}
})