PDA

View Full Version : [3.x] Ext.ux.MonthMenu



vtswingkid
10 Jul 2009, 8:33 AM
I ported the month menu from this thread to 3.x

http://extjs.com/forum/showthread.php?t=20181

keypoint
12 Jul 2009, 10:00 PM
A simple plugin that transforms a datefield into a month and year picker field:



Ext.ux.MonthPickerPlugin = function() {
var picker;
var oldDateDefaults;

this.init = function(pk) {
picker = pk;
picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);
picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
};

function setDefaultMonthDay() {
oldDateDefaults = Date.defaults.d;
Date.defaults.d = 1;
return true;
}

function restoreDefaultMonthDay(ret) {
Date.defaults.d = oldDateDefaults;
return ret;
}

function onClick(e, el, opt) {
var p = picker.menu.picker;
p.activeDate = p.activeDate.getFirstDateOfMonth();
if (p.value) {
p.value = p.value.getFirstDateOfMonth();
}

p.showMonthPicker();

if (!p.disabled) {
p.monthPicker.stopFx();
p.monthPicker.show();

p.mun(p.monthPicker, 'click', p.onMonthClick, p);
p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
p.onMonthClick = p.onMonthClick.createSequence(pickerClick);
p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);
p.mon(p.monthPicker, 'click', p.onMonthClick, p);
p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
}
}

function pickerClick(e, t) {
var el = new Ext.Element(t);
if (el.is('button.x-date-mp-cancel')) {
picker.menu.hide();
} else if(el.is('button.x-date-mp-ok')) {
var p = picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}

function pickerDblclick(e, t) {
var el = new Ext.Element(t);
if (el.parent()
&& (el.parent().is('td.x-date-mp-month')
|| el.parent().is('td.x-date-mp-year'))) {

var p = picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}
};

Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);


Now all you have to do is create a regular datefield, set the format to something like 'm/Y' and set the plugins property to 'monthPickerPlugin'.

For a full example, see http://www.keypoint.ro/ext/

Hope this helps

hezhanfei
13 Jul 2009, 9:29 PM
I am new on Extjs,I am using ExtJS3.0.with datafield I want to show only year and month,I have seen the following code on the forums.


Ext.ux.MonthPickerPlugin = function() {

var picker;



this.init = function(pk) {

picker = pk;

picker.on('afterrender', onRender);

};



function onRender(pk, e) {

picker.el.on('click', onClick);

picker.trigger.on('click', onClick);

}



function onClick(e, el, opt) {

var p = picker.menu.picker;



// DatePicker.showMonthPicker

if(!p.disabled){

p.createMonthPicker();

var size = p.el.getSize();

p.monthPicker.setSize(size);

p.monthPicker.child('table').setSize(size);



p.mpSelMonth = (p.activeDate || p.value).getMonth();

p.updateMPMonth(p.mpSelMonth);

p.mpSelYear = (p.activeDate || p.value).getFullYear();

p.updateMPYear(p.mpSelYear);



// replace the slide in with a show

p.monthPicker.show();

}



p.monthPicker.on('click', pickerClick);

p.monthPicker.on('dblclick', pickerDblclick);

}



function pickerClick(e, t) {

var p = picker.menu.picker;

var el = new Ext.Element(t);

if (el.is('button.x-date-mp-cancel')) {

picker.menu.hide();

} else if(el.is('button.x-date-mp-ok')) {

p.setValue(p.activeDate);

p.fireEvent('select', p, p.value);

}

}



function pickerDblclick(e, t) {

var p = picker.menu.picker;

p.setValue(p.activeDate);

p.fireEvent('select', p, p.value);

}

};

Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);


and I created a Html file test.html, like the following code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript" src="./monthPicker.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.form.DateField({
renderTo: document.body,
plugins:'monthPickerPlugin',
name:'rq',
format: 'm/Y'
});
});
</script>
<body>
</body>
</html>

after i run this file and pick the datafield there is an error:

line 15 :picker.menu.picker is null or is not a object

what's the problem?

thanks in advance

keypoint
13 Jul 2009, 11:00 PM
Hey,

You are right. My plugin was assuming that you have the "editable" attribute set to false on the dateField.
I have updated the original post (see the render method).
Thank you for the report.

hezhanfei
13 Jul 2009, 11:16 PM
Thank you for your reply!
I already have the "editable" attribute set on the dateField,like following code.

new Ext.form.DateField({
renderTo: document.body,
plugins:'monthPickerPlugin',
name:'rq',
editable:false,
format: 'm/Y'
});

but the same problem. Any otherthing I need to do? or do i need to create a datemenu?
how?
thank in advance

keypoint
14 Jul 2009, 1:02 AM
For me it's working ok now. Make sure you're not loading the source from cache.
When does the error occur? When you click in the text editing or on the trigger?

hezhanfei
14 Jul 2009, 1:13 AM
the error occurs when I click in the text editing .
Could you show me some code that working right on you computer,My explorer is IE6.
thank you very much!

keypoint
14 Jul 2009, 1:15 AM
Ah, IE6... :)
I have tested exactly your code, with the new version of the plugin.
Please check it using a newer browser too.
I'll look into the problem if I find an IE6 somewhere.

Wait, I see the problem exists in IE8 too. Firefox & Chrome are ok

keypoint
14 Jul 2009, 1:30 AM
Seems that on IE there's some race condition going on. Updated the code. You should be ok now.
Ok, done! The new solution is even a bit more elegant.

To the Ext team: why is the order in which listeners are called reversed in IE?
Example: the date field above, with a plugin that adds an onclick listener for the textfield in the afterrender listener.
In Firefox and Chrome, the plugin listener is called last (fifo). In IE, it's called first (lifo).

mystix
14 Jul 2009, 2:21 AM
Seems that on IE there's some race condition going on. Updated the code. You should be ok now.
Ok, done! The new solution is even a bit more elegant.

To the Ext team: why is the order in which listeners are called reversed in IE?
Example: the date field above, with a plugin that adds an onclick listener for the textfield in the afterrender listener.
In Firefox and Chrome, the plugin listener is called last (fifo). In IE, it's called first (lifo).

you should post a bug report in the 2.x / 3.x Bug forum if you believe there's a bug in the event-firing order. the Devs only monitor the Bug forums for bug reports.

keypoint
14 Jul 2009, 4:16 AM
I will, thanks.

Meanwhile, fixed - fully working on IE too.

hezhanfei
15 Jul 2009, 1:06 AM
It worked,thank you very much for your help.!!!:)

ToniTornado
30 Jul 2009, 2:11 AM
Nice work, keypoint! Your solution is much nicer than other MonthPicker extensions around.

I experienced a small problem selecting dates at the end of the month. If I pick Feb. today (07/30/2009) I end up with 3 / 2009 in the field. I found that the format 'm / Y' will always use today's day.

Here is my quick fix:


var monthField = new Ext.form.DateField({
id : 'monthField',
name : 'month',
plugins : 'monthPickerPlugin',
format : 'm / Y (d)',
editable : false
});
monthField.on('render', function() {
Ext.getCmp('monthField').setValue(new Date((new Date().getMonth()+1)+'/20/'+(new Date().getFullYear())));
});

Which is setting the date to 20th of current month on render and keeping the day value '(d)' outside of the visible part of my field by adding spaces. If I keep track of the component's size and set editable to false, it works fine for me.

I suppose there are better solutions if one goes deeper into that...

mystix
30 Jul 2009, 2:22 AM
Nice work, keypoint! Your solution is much nicer than other MonthPicker extensions around.

I experienced a small problem selecting dates at the end of the month. If I pick Feb. today (07/30/2009) I end up with 3 / 2009 in the field. I found that the format 'm / Y' will always use today's day.

Here is my quick fix:


var monthField = new Ext.form.DateField({
id : 'monthField',
name : 'month',
plugins : 'monthPickerPlugin',
format : 'm / Y (d)',
editable : false
});
monthField.on('render', function() {
Ext.getCmp('monthField').setValue(new Date((new Date().getMonth()+1)+'/20/'+(new Date().getFullYear())));
});

Which is setting the date to 20th of current month on render and keeping the day value '(d)' outside of the visible part of my field by adding spaces. If I keep track of the component's size and set editable to false, it works fine for me.

I suppose there are better solutions if one goes deeper into that...

just use the Date.defaults hash.
see http://extjs.com/docs/?class=Date&member=defaults

keypoint
30 Jul 2009, 2:47 AM
Thanks, I'll check it out when I have a little time

ValterBorges
7 Aug 2009, 1:13 PM
Hi Keypoint,
Thanks for this great pluggin it's very handy on business forms because many times from and to's require only month/year.

I ended up using format: 'n/Y' because otherwise it makes the 0 on months less than 10 required.


Here is a problem I ran into on days 29-31 of given months:

It seems the datepicker defaults to the current day for day. This causes problems when the current month has 31 days and you choose a month with less than 31 days it reverts to either the prior or the next month. Have you ran into this, come up with a solution?

keypoint
8 Aug 2009, 1:17 AM
There you go, guys - script updated on the first page.
Thanks, Mistix, the defaults trick was half the solution ;)

mystix
8 Aug 2009, 10:19 AM
There you go, guys - script updated on the first page.
Thanks, Mistix, the defaults trick was half the solution ;)

hmmm.. you might want to state somewhere that your plugin permanently overrides the Date.defaults hash. unless you find a way to unobtrusively set/unset that in your plugin :-?

keypoint
8 Aug 2009, 11:42 AM
I know :) I thought about that after submitting it.

Ok. Taken mistix's advice into consideration and updated the plugin; now it resets the defaults hash after using it to retrieve the value. I hope this helps.

ValterBorges
10 Aug 2009, 6:54 PM
Hi Keypoint,

Works great now when you have format set to n/d/Y. However if you leave out the day and tab out of the field it will jump dates.

ex:
To replicate use config below and set system clock to 8/31.
Next pick september and tab out of the field date will jump from 9/2009 to 10/2009.

Seems like during validation the default date is used if the format doesn't include day?





var mtFrom = new Ext.form.DateField({
id:'mtFrom',
applyTo: 'imtFrom',
plugins:'monthPickerPlugin',
minValue: '1/1/1996',
maxValue: '1/1/2010',
name:'rq',
editable:false,
format: 'n/Y'
});

keypoint
10 Aug 2009, 9:05 PM
This was happening before. Did you use the last version?

ValterBorges
11 Aug 2009, 7:37 AM
Yes, I used the latest version and i just double checked it again this morning.

Last time it was doing it on the picker and when it lost focus now it's only doing it on lost focus. It's not doing it on the picker selection because you've made it so that it chooses the 1st day, however you set the default day back and i think that's before the blur takes place so that when it blurs and validates the date is back to the 31st and so it skips to the next month.

gvjn
12 Aug 2009, 9:05 AM
Yes, ValterBorges is right, and I get this problem even if I don't set my system clock to 8/31. And it occurs for months with less than 31 days.


new Ext.form.DateField({
fieldLabel: 'Month Year',
id:'monthyear',
plugins:'monthPickerPlugin',
editable:false,
format: 'm/Y'
})

keypoint
15 Aug 2009, 1:45 AM
Valter, gvjn - try it now. Needed to overwrite another field method and temporary change the parsing defaults.

evansenter
25 Aug 2009, 4:43 PM
I noticed a small bug when double clicking one of the arrows to move forward and back a year.

Replaced the double click handler with this:

function pickerDblclick(e, t) {
var p = picker.menu.picker;
var el = new Ext.Element(t);
if (!el.is('a.x-date-mp-prev') && (!el.first() || !el.first().is('a.x-date-mp-prev')) &&
!el.is('a.x-date-mp-next') && (!el.first() || !el.first().is('a.x-date-mp-next'))) {
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}

markeza
22 Sep 2009, 4:01 AM
For non English locales (e.g. Serbian), when field lose focus date reverts to today. (format 'F Y' or 'M Y').

dorgan
19 Oct 2009, 10:18 AM
I am trying to use your plugin as it provides exactly what I need and I am getting the following error:

ptypes[config.ptype || defaultType] is not a constructor
chrome://firebug/content/blank.gif
return new ptypes[config.ptype || defaultType](config);\n

keypoint
19 Oct 2009, 10:20 AM
Depends on how you use it :)
An example?

dorgan
19 Oct 2009, 10:22 AM
Sorry about that it was my fault: I was using the file in the zip file and not the second post, once I copied the code from the second post it works fine.

Is there a way so that it wont show future dates?

Awsome Plugin by the way...IMO it should become part of the core

keypoint
19 Oct 2009, 10:26 AM
I'm glad you like it :)

You mean restrict the future days, months and years?
The DateField component has a maxValue config parameter. You could try that.

dorgan
19 Oct 2009, 10:28 AM
Also can I add a change listener to this item?

keypoint
19 Oct 2009, 10:29 AM
The rest of the behaviour of the field is unchanged (except picking an exact day, of course). Of course you can use listeners.

dorgan
19 Oct 2009, 10:39 AM
The maxValue looks like it works for purposes of validation. But doesnt restrict the selection of a month/year.

dorgan
19 Oct 2009, 11:01 AM
is there any chance you can add a hook in for when the OK button is clicked, as the change event requires a blur, and it would be really nice if i could fire my even as soon as the value has been selected.

keypoint
19 Oct 2009, 11:05 AM
Sorry but I think these changes fall outside the purpose of this plugin.
It was only meant to disable day selection, not interfere with the control in any other way.
Any other changes should be done directly on the control (you may need to extend it).
I'll take a look at it when I'll have a little time but I don't promise anything :)

dorgan
19 Oct 2009, 11:14 AM
OK the only thing that would be really nice to have is the OK button click even, if I could set a property = function() then that would be excellent and I am sure there are alot of other people out there that would this this as well.

dorgan
19 Oct 2009, 11:52 AM
Adding a select listener/function() did what I needed it to do. Now I am going to look at making the maxValue property only generate values for months/years less then the max value.

Thomas Triplet
19 Oct 2009, 11:59 AM
Do you have a demo page or screenshot somewhere?
Sounds like something I might need :P

keypoint
22 Oct 2009, 11:01 AM
You have instructions on the first page. All you need to do is specify the plugin name for a regular dateField

pretender
25 Oct 2009, 2:41 PM
Hi there,

I'm new to this things, and i really need this on my project..
"All you need to do is specify the plugin name for a regular dateField"
Could explain how we do it?

Thanks

keypoint
25 Oct 2009, 2:45 PM
http://www.extjs.com/forum/showthread.php?p=357602#post357602

pretender
26 Oct 2009, 1:10 AM
Ok, but where i put the plugin? I don't really know...
I need some basic explanation how to use this... Could you?

Thanks in advance,
Pretender

keypoint
26 Oct 2009, 1:11 AM
You put the file somewhere in your web folder and include it the same you did with ext-all.js, right after it.

stephen.friedrich
30 Oct 2009, 4:58 AM
Great! Exactly what I needed and worked right from the start.

Just a very small issue: Clicking too fast on the year paging buttons (probably interpreted as double click?) makes the dialog go away.
The "unplugged" version of the date picker works fine.

alexb
12 Nov 2009, 3:37 AM
The following code works with both 2.x and (presumably) 3.x



Ext.ux.MonthPickerPlugin = function() {
var picker;

this.init = function(pk) {
//Date.defaults.d = 1;
picker = pk;

var def = Date.defaults;
if(!def){
Date.defaults = {};
}

picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);
picker.getValue = dateFieldGetValue;
picker.beforeBlur = beforeFieldBlur;
};

function dateFieldGetValue() {
var d = Date.defaults.d;
Date.defaults.d = 1;
var ret = this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || "";
Date.defaults.d = d;
return ret;
}

function onClick(e, el, opt) {
var p = picker.menu.picker;
p.activeDate = p.activeDate.getFirstDateOfMonth();
if (p.value) {
p.value = p.value.getFirstDateOfMonth();
}

// DatePicker.showMonthPicker
if(!p.disabled){
p.createMonthPicker();
var size = p.el.getSize();
p.monthPicker.setSize(size);
p.monthPicker.child('table').setSize(size);
p.mpSelMonth = (p.activeDate || p.value).getMonth();
p.updateMPMonth(p.mpSelMonth);
p.mpSelYear = (p.activeDate || p.value).getFullYear();
p.updateMPYear(p.mpSelYear);
// replace the slide in with a show
p.monthPicker.show();

var v3 = (p.mun != null);
if(v3){
p.mun(p.monthPicker, 'click', p.onMonthClick, p);
p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
p.onMonthClick = p.onMonthClick.createSequence(pickerClick);
p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);
p.mon(p.monthPicker, 'click', p.onMonthClick, p);
p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
}else{
p.monthPicker.un('click', p.onMonthClick)
p.monthPicker.un('dblclick', p.onMonthDblClick)
p.onMonthClick = p.onMonthClick.createSequence(pickerClick);
p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);
p.monthPicker.on('click', p.onMonthClick, p);
p.monthPicker.on('dblclick', p.onMonthDblClick, p);
}


}
}

function pickerClick(e, t) {
var p = picker.menu.picker;
var el = new Ext.Element(t);
if (el.is('button.x-date-mp-cancel')) {
picker.menu.hide();
} else if(el.is('button.x-date-mp-ok')) {
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}
/*
function pickerDblclick(e, t) {
var p = picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
*/
//credit to evansenter
function pickerDblclick(e, t) {
var p = picker.menu.picker;
var el = new Ext.Element(t);
if (!el.is('a.x-date-mp-prev') && (!el.first() || !el.first().is('a.x-date-mp-prev')) &&
!el.is('a.x-date-mp-next') && (!el.first() || !el.first().is('a.x-date-mp-next'))) {
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}

function beforeFieldBlur() {
var d = Date.defaults.d;
Date.defaults.d = 1;
var v = this.parseDate(this.getRawValue());
Date.defaults.d = d;
if (v) {
this.setValue(v);
}
}
};

//Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);

keypoint
16 Nov 2009, 4:57 AM
@stephen.friedrich: correct, amigo!

Please see the first page for an updated version.
I have brushed up my Ext skills a little bit so I came up with a lighter version, that removes some code duplication.

Feel free to suggest changes!
I am also attaching there a full blown example.

stephen.friedrich
17 Nov 2009, 10:30 AM
Thanks, new version works fine.
In fact it even fixes two other issues I have noticed in the mean time (it correctly validates against min/maxValues and it correctly ignores clicks on the calendar icon if the combo is disabled).

Thanks again for the new version!

durlabh
3 Dec 2009, 12:00 PM
I took the liberty to modify the class to be structured more Ext style! Also, in my general tests, it works for both 2.x and 3.x. Here is the code:



Ext.ux.MonthPickerPlugin = function(config) {
Ext.apply(this, config);
}

Ext.ux.MonthPickerPlugin.prototype = {
init: function(picker) {
this.picker = picker;
picker.onTriggerClick = picker.onTriggerClick.createSequence(this.onClick, this);
picker.parseDate = picker.parseDate.createInterceptor(this.setDefaultMonthDay, this).createSequence(this.restoreDefaultMonthDay, this);
},

setDefaultMonthDay: function() {
this.oldDateDefaults = Date.defaults.d;
Date.defaults.d = 1;
return true;
},

restoreDefaultMonthDay: function(ret) {
Date.defaults.d = this.oldDateDefaults;
return ret;
},

first: true,

onClick: function(e, el, opt) {
var p = this.picker.menu.picker;
p.activeDate = p.activeDate.getFirstDateOfMonth();
if (p.value) {
p.value = p.value.getFirstDateOfMonth();
}
p.showMonthPicker();
if (!p.disabled) {
if (this.first) {
// We should create the sequence functions only once.
this.first = false;
if (Ext.version < "3") {
p.monthPicker.slideIn = Ext.emptyFn;
p.monthPicker.slideOut = Ext.emptyFn;
} else {
p.monthPicker.stopFx();
}

if (typeof p.mun == 'function') {
p.mun(p.monthPicker, 'click', p.onMonthClick, p);
p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
} else {
p.monthPicker.un('click', p.onMonthClick)
p.monthPicker.un('dblclick', p.onMonthDblClick)
}
p.onMonthClick = p.onMonthClick.createSequence(this.pickerClick, this);
p.onMonthDblClick = p.onMonthDblClick.createSequence(this.pickerDblclick, this);
p.mon(p.monthPicker, 'click', p.onMonthClick, p);
p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
}
p.monthPicker.show();
}
},

pickerClick: function(e, t) {
var picker = this.picker;
var el = new Ext.Element(t);
if (el.is('button.x-date-mp-cancel')) {
picker.menu.hide();
} else if (el.is('button.x-date-mp-ok')) {
var p = picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
},

pickerDblclick: function(e, t) {
var el = new Ext.Element(t);
var parent = el.parent();
if (parent && (parent.is('td.x-date-mp-month') || parent.is('td.x-date-mp-year'))) {
var p = this.picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}
};

if(Ext.version >= "3") {
Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);
}


The changes I made specifically are:


Instead of attaching the custom functions on blur events, I applied on parseDate as every time value changes, it should be using parseDate method
I don't create sequence on every click. Rather I did it only once.

Let me know what you think.

keypoint
3 Dec 2009, 12:45 PM
Hey, thanks for your interest, first of all!
I'll take a look at it, when I get a chance.
Peace!

dorgan
17 Dec 2009, 7:32 AM
So far this extension is working with 3.1 but the only thing I have noticed and it wasnt just happing in 3.1 is the minValue isnt working properly.


Maybe its the format of my minValue. How should I be formatting the minValue?

dorgan
18 Dec 2009, 10:35 AM
any update on this?

durlabh
18 Dec 2009, 10:38 AM
It might be related to this: http://www.extjs.com/forum/showthread.php?t=88024

titzu
25 Jan 2010, 4:02 AM
hi,
nice job. I am looking for something similar but with days and month selection. Please let me know is something like that exists (I searched the forum but no results...)

Thanks in advance,
Titzu

keypoint
25 Jan 2010, 4:03 AM
What's the difference between what you need and the standard date picker? :)

titzu
25 Jan 2010, 4:07 AM
the difference is that the standard date picker allow selection of the year and I dont need that

keypoint
25 Jan 2010, 4:27 AM
Right, there isn't a switch for that :)
I suggest you create a plugin in which you disable the triggering of the year selection in an onRender sequence method. First let the control do its own rendering (not too much overhead), then remove the part you don't need.

ElMonty
29 Jan 2010, 7:17 AM
Thanks for that nice plugin!

here is a little bugfix, to solve an error when the datepicker is disabled and you click on the trigger:


function onClick(e, el, opt) {
if (picker.disabled) return;

var p = picker.menu.picker;

p.activeDate = p.activeDate.getFirstDateOfMonth();

if (p.value) {

p.value = p.value.getFirstDateOfMonth();

}



p.showMonthPicker();



if (!p.disabled) {

p.monthPicker.stopFx();

p.monthPicker.show();



p.mun(p.monthPicker, 'click', p.onMonthClick, p);

p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);

p.onMonthClick = p.onMonthClick.createSequence(pickerClick);

p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);

p.mon(p.monthPicker, 'click', p.onMonthClick, p);

p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);

}

}

rakesur
26 Apr 2010, 5:56 AM
Hi keypoint,

I am not able to run your expample with extjs 3.2, where its working fine with extjs 3.0

Thanks

rakesur
26 Apr 2010, 10:57 PM
Hi,

Your plugin seems to be working fine with extjs 3.2 by commenting "readOnly:true" line.

Thanks

fabads
30 Jul 2010, 3:34 AM
Hi,

I'm using this component to display monthly based charts and I'd like to add buttons to quickly go to previous and next month.
I've included the datefield into a toolbar which is included in a tabpanel.
What is the proper way to get the datefield value ?
And what is the best way to override the value (when I click on month+1 button for instance) ?


var tabs = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Month',
tbar: new Ext.Toolbar({
items: [{
xtype: 'datefield',
id: 'dtMonth',
fieldLabel: 'Choose month',
plugins: 'monthPickerPlugin',
format: 'M Y',
editable: false,

},'-',{
...
}]
})
}]
...
});I saw that getCmp is not recommended (I'd like to make a plugin for my application). And ownerCt is new for me.

Thanks a lot for your support

Fabrice.

itsmatt
23 Aug 2010, 7:28 AM
The maxValue looks like it works for purposes of validation. But doesnt restrict the selection of a month/year.

Do you find a solution to make the future date not selectable ?
Cos your right, maxValue and MinValue only check about the value in the field and do not disable the range date not wanted in the plugin.

However, thanks a lot for this plugin it's really smart :)

If you have any idea on how it could enable only the range wanted (between minValue and maxValue) in the DatePicker, it would be a great improve to this plugin.

Thanks a lot.

fabads
22 Sep 2010, 5:26 AM
Hi,

Is it possible to have a multi month selection with this MonthMenu ?
If no, do you know a component allowing this ? (no days, only months and years).

Thx

ninoguba
27 Oct 2010, 12:48 PM
Do you find a solution to make the future date not selectable ?
Cos your right, maxValue and MinValue only check about the value in the field and do not disable the range date not wanted in the plugin.

However, thanks a lot for this plugin it's really smart :)

If you have any idea on how it could enable only the range wanted (between minValue and maxValue) in the DatePicker, it would be a great improve to this plugin.

Thanks a lot.

This is very doable. I was able to change the MonthPicker to only display 3 years (previous, current, next). I did that by overriding the following:



Ext.override(Ext.DatePicker, {

createMonthPicker : function(){
if(!this.monthPicker.dom.firstChild){
var buf = ['<table border="0" cellspacing="0">'];
for(var i = 0; i < 6; i++){
buf.push(
'<tr><td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>',
'<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td>',
((i%2) != 0) ?
'<td>&nbsp;</td></tr>' :
'<td class="x-date-mp-year"><a href="#"></a></td></tr>'
);
}
buf.push(
'<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
this.okText,
'</button><button type="button" class="x-date-mp-cancel">',
this.cancelText,
'</button></td></tr>',
'</table>'
);
this.monthPicker.update(buf.join(''));
this.mon(this.monthPicker, 'click', this.onMonthClick, this);
this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this);
this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
this.mpYears = this.monthPicker.select('td.x-date-mp-year');
this.mpMonths.each(function(m, a, i){
i += 1;
if((i%2) === 0){
m.dom.xmonth = 5 + Math.round(i * 0.5);
}else{
m.dom.xmonth = Math.round((i-1) * 0.5);
}
});
}
},
updateMPYear : function(y){
this.mpyear = y;
var ys = this.mpYears.elements;
var currYear = (new Date()).getFullYear();

var td = ys[0];
var y2 = currYear - 1;
td.firstChild.innerHTML = y2;
td.xyear = y2;
this.mpYears.item(0)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
var td = ys[1];
var y2 = currYear;
td.firstChild.innerHTML = y2;
td.xyear = y2;
this.mpYears.item(1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
var td = ys[2];
var y2 = currYear + 1;
td.firstChild.innerHTML = y2;
td.xyear = y2;
this.mpYears.item(2)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
}

});


This should give you an idea how you can do what you need.

webarnie
26 Jan 2011, 6:57 AM
This is a great plugin and I'm glad someone finally did it. I want to use the plugin but i am getting 2 errors:



Uncaught TypeError: Cannot read property 'prototype' of undefined

Ext.apply.extendext-base.js:7 (file:///C:/ext3/adapter/ext/ext-base.js)
(anonymous function)MonthPickerPlugin.js:277 (file:///C:/ext3/ux/MonthPickerPlugin.js)



ext-all-debug.js:10547 (file:///C:/ext3/ext-all-debug.js)Uncaught TypeError: Cannot read property 'init' of undefined


the first is from MonthPickerPlugin.js, line 277. Not sure about the second error. Can you help me fix this?

ninoguba
26 Jan 2011, 11:15 AM
This is a great plugin and I'm glad someone finally did it. I want to use the plugin but i am getting 2 errors:





Uncaught TypeError: Cannot read property 'prototype' of undefined

Ext.apply.extendext-base.js:7 (file:///C:/ext3/adapter/ext/ext-base.js)
(anonymous function)MonthPickerPlugin.js:277 (file:///C:/ext3/ux/MonthPickerPlugin.js)



ext-all-debug.js:10547 (file:///C:/ext3/ext-all-debug.js)Uncaught TypeError: Cannot read property 'init' of undefined

the first is from MonthPickerPlugin.js, line 277. Not sure about the second error. Can you help me fix this?

Just go to my other post for a solution that doesn't need a separate plugin to achieve a Month/Year Picker:

http://www.sencha.com/forum/showthread.php?113895-DateMenu-Month-Year-Picker&p=531049#post531049

Hope you find it useful.

lukasw44
22 Jun 2011, 1:33 AM
I am looking for my solution my i define datepicker in panel . And now i need to have got some functionaly with cliks month/year so ... In my solution user when user go to view when he could choose year or month none month and year are selected. And when his choose only month and press ok so in trigger i get this field and call another function , in other case when user click only year and next press ok so its another trigger when i get this field and the last option is when user click month and year and press ok ....

Can i modyfy this monthPlugin and have got this functional ???

I am newbie so its very hard to do this but i thing that someone have got the same problem ...

plz help :)

webarnie
22 Jun 2011, 4:45 AM
you should not have to modify the plugin. I am attaching a sample and if you put the sample on your C drive in a folder monthPicker all you should have to do is extaqct the code and run it. The sample uses month name and when i used it i wanted the month number so i defined it as follows:




{
xtype: 'datecolumn',
dataIndex: 'expirationDate',
header: 'Expiration Date',
align: 'center',
sortable: true,
width: 100,
groupable: false,
id: 'ccExpirationDateHeader',
editor: {
xtype: 'datefield',
plugins: 'monthPickerPlugin',
format: 'm/Y',
allowBlank: false,
minValue: (new Date()).format("m/Y"),
minText: 'Cannot have a date before current month!',
name: 'ccExpirationDate',
ref: '../../../ccExpirationDate',
id: 'ccExpirationDate'

}
},




I hope this helps. Good luck

-Walt

lukasw44
23 Jun 2011, 1:09 PM
its very god thanks but i need standard choose date/month/year too.

Extended functionality must be when user click top panel of datepicker. So when page is load first time datepicker show standard view day and standard listener 'select' ....

and how can i defint this datepicker in panel not in window ????

because i must render it into <div>

and when i use this solution i have got error :

my code:

var calendar = new Ext.ux.MonthPicker({});


var calendarPanel = new Ext.Panel({
id: 'calendarPanel',
renderTo: 'CallendarBox',
baseCls: 'calendarBoxBaseClass',
items:[calendar]});
G is undefined :
window.undefined=window.undefined;Ext=...window.attachEvent("onunload",a)}})();

webarnie
24 Jun 2011, 4:31 AM
On the html page, there are 2 date pickers. Use the second one, regular picker. I changed the format to d M Y. You can change There is also a way to limit what dates you can pick. I have an example of limiting date but need to find it. Let me know if you need it and I will send it to you. For date formats, go to Extjs doc (http://extjs.cachefly.net/ext-3.3.1/docs/ (http://extjs.cachefly.net/ext-3.3.1/docs/)), Date class. Good luck.
-Walt

lukasw44
8 Jul 2011, 1:04 AM
I copy this picker as you say and i always have got the error G is undefined in firebug. MonthPicker work fine but on IE7 its not working plz help. I Uze this picker in Panel not in window so what i must change
thx for reply

I am debug my code and i have got another error Ext.EventManager._unload is not a function ??

webarnie
8 Jul 2011, 7:34 AM
could you please post, attach you code so i can see what you have done.

lukasw44
8 Jul 2011, 8:49 AM
I have something like that and use montPicker
because i need use montPicker to show calendar in panel not in window or use datefield

var calendarPanel = new Ext.Panel({
id: 'calendarPanel',
renderTo: 'CallendarBox',
title: 'Kalendar',
baseCls: 'calendarBoxBaseClass',

items: [{
xtype: 'monthpicker',
format: 'M Y',
id: 'calendar',
baseCls: 'calendarBaseCls',
cls: 'calendarCls',
listeners:
{
'select': function(date_picker, date)
{
params = new Object();
params['ajax'] = 'true';
params['year'] = date.getFullYear();
//alert('paramsYear: ' + params['year'] );
if(isYearCalendar != null && isYearCalendar == 'false')
{
params['month'] = parseInt(date.getMonth()) + 1;
//alert('paramsMonth: ' + params['month'] );
}
year = date.getFullYear();

month = parseInt(date.getMonth()) + 1;
Ext.getCmp('mainBoxPanel').reloadContent(params);
}
}
}]
)]

lukasw44
8 Jul 2011, 8:55 AM
I have one more questrion

Can i do something like that:

Use Ext datepicker and own button and when i click a button datepicker swiching to view month/year ??

Something lika that: Ext.getCmp('calendar').fireEvent() ??

And can i delete and restore datepicker event ??

webarnie
8 Jul 2011, 11:27 AM
I think you are using the wrong xtype. I am attaching a working version using a panel. You must change 3 lines in the html to point to your extjs3 installation. I added a console.log for debugging purposes. Use either firefox or chrome as console.log will not work with IE. I hope this example helps. Let me know if you have any questions.

lukasw44
9 Jul 2011, 6:46 AM
Hello this work fine but error stil exist the problem is in monthPicker because when i delete include MonthPicker in jsp page error disappear.

I use Extjs ver 3.0
So the problem is with implementation monthpicker below i attach this file
i try use monthPicker ver 0.2 but its not work :/

26925

this is my import:

<link rel="stylesheet" type="text/css" href="extjs3/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs3ext-all.js"></script>
<script type="text/javascript" src="extjs3/ux/MonthYearDatePicket.js"></script>

and when i delete import:
<script type="text/javascript" src="extjs3/ux/MonthYearDatePicket.js"></script>
problem disappear but i havent got montPicker too :/

lukasw44
9 Jul 2011, 8:57 AM
I attach a screen 26926

lukasw44
10 Jul 2011, 4:46 AM
Hello its posible to use monthPickerPlugin to xtype : 'datepicker' not datefield ???

when i use datePickerPlugin in datefield its working fine but if i use it in xtype: 'datepicker' its not working

i ask because i need hava got static calendar and show only year/month menu

Entropy
22 Sep 2011, 10:31 AM
Is there a 4.x version of this plugin?

Also, I think this month/yeah selection behavior is very common and Ext should consider incorporating the features in the Ext package proper. Anyone doing banking or accounting apps are quite likely to hit this need.

Tod
26 Sep 2011, 5:34 AM
I am seeing strange behavior when the user chooses not to use the mouse to graphically select a month and year, but instead to type in values. If the user enters "1/1999" it claims that it isn't a date! Its okay if the user enters "01/1999". If the user types in "1/99" it becomes "04/2011" because it treats the input as month 1 plus 99 days in the current year. Anybody else seen this or have solution? Thanks.

Andrew Van Duivenbode
14 Mar 2012, 4:13 AM
It's always worth checking this forum before you decide to code your own version. :) Cheers!