View Full Version : datePicker month and year only

30 Jul 2009, 10:59 AM
I would like to use a datePick but only need month and year. Can this be done?

30 Jul 2009, 1:43 PM
dont know maybe this helps


13 Aug 2009, 5:16 AM
this is perfect exactly what i need but not sure hoe to implement. Here what i am currently using to get the date on the page:

xtype: "datefield",
name: "expirationDate",
id: "expirationDate",
tabIndex: 8,
vtype: 'daterange',
autoshow: true,
fieldLabel: "Expiration Date"

I realize i need to include monthPicker.js, what do i use for the xtype?

13 Aug 2009, 5:34 AM
Surely the best way to go is to modify Ext.DatePicker slightly so that it can be configured to just show its MonthPicker view?

24 Feb 2011, 1:41 AM
This is pretty old topic, but just wanted to know if anyone have done this ?

Is it possible to modify the usage of the datePicker to only use the months interface (without selecting days.. ?

24 Feb 2011, 1:55 AM
There was a place here on forum where i got this plugin but i can't find it, so i'll paste it here:

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


if (!p.disabled) {

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')) {
} else if(el.is('button.x-date-mp-ok')) {
var p = picker.menu.picker;
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.fireEvent('select', p, p.value);

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

24 Feb 2011, 2:16 AM
Looks grate ! :) thank you,
i am sorry but i am quite new to extjs, how do i use it ? Just paste it into my code and use the funtion or save it as another JS file, and if so how do i call it ?
Tnx :)

24 Feb 2011, 3:31 AM
paste the code into another js file (e.g: MonthPickerPlugin.js), include that js in your file, then add this to your datefield:

format: 'm-Y', // or other format you'd like
plugins: 'monthPickerPlugin',