Datepicker change month listener

[navvn]

Is there a listener or any other way to fire an event while changing month/year in a datepicker?

[tobiu]

by default, there is only an event for "select" which you can listen to.


select( Ext.picker.Date this, Date date, Object eOpts )
Fires when a date is selected

Parameters
this : Ext.picker.Date
DatePicker
date : Date
The selected date
eOpts : Object
The options object passed to Ext.util.Observable.addListener.


if this one does not fit your needs, you can override the following method and fire an custom event there:


/**
* Respond to an ok click on the month picker
* @private
*/
onOkClick: function(picker, value){
var me = this,
month = value[0],
year = value[1],
date = new Date(year, month, me.getActive().getDate());

if (date.getMonth() !== month) {
// 'fix' the JS rolling date conversion if needed
date = new Date(year, month, 1).getLastDateOfMonth();
}
me.update(date);
me.hideMonthPicker();
}

[navvn]

Well its not what i meant. When datepicker is expanded there are 2 arrow on a top of it window. After pressing them u can change month fast (Previous Month / Next Month). After chaning a month i would like to fire my custom function.

[tobiu]

you also have:


/**
* Show the previous month.
* @param {Object} e
* @return {Ext.picker.Date} this
*/
showPrevMonth : function(e){
return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
},

/**
* Show the next month.
* @param {Object} e
* @return {Ext.picker.Date} this
*/
showNextMonth : function(e){
return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
}


but seriously: don't be afraid of the code! open:
http://docs.sencha.com/ext-js/4-0/source/Date4.html

and search for the exact points you like to modify.

[syl_via38]

Hello,

I would like to do the same : add onMonthChange listener but I don't understand how to do that.

Someone have a solution to propose.

Thanks in advance

Sylvia From France

[chavivp]

var calendarPicker = myDateField.getPicker();
calendarPicker.origUpdate = calendarPicker.update;

calendarPicker.update = function(date, forceRefresh){
console.log('Update called for date:'+date);

calendarPicker.origUpdate(date,forceRefresh);
};

Put your code in the update function. You will be called on all events including selection of month and year from the month/year selector. Be careful of recursive events because any change to the calendar will trigger another update event and you will get a loop.