View Full Version : Datepicker change month listener

28 Nov 2011, 1:32 AM
Is there a listener or any other way to fire an event while changing month/year in a datepicker?

28 Nov 2011, 1:44 AM
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

this : Ext.picker.Date
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();

28 Nov 2011, 1:47 AM
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.

28 Nov 2011, 1:56 AM
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:

and search for the exact points you like to modify.

9 Dec 2011, 7:37 AM

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

4 May 2013, 2:03 PM
var calendarPicker = myDateField.getPicker();
calendarPicker.origUpdate = calendarPicker.update;

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


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.

13 Jan 2014, 1:39 AM
This is an example of extending 'Ext.date.Picker', if you have problem to do it:

Ext.define("YourCalendarPicker", {
extend: "Ext.picker.Date",
update : function(date, forceRefresh){
var me = this;
monthViewChange = me.isAnotherMonthView(date);
if (monthViewChange){
me.fireEvent("monthviewchange", me, date, me.activeDate);
return me;
* return true if the given date is in a different month view of the actual calendar date
* @param {Date} date
* @return {Boolean}
isAnotherMonthView: function(date){
var activeDate = this.activeDate || date;
return date.getYear() != activeDate.getYear() || date.getMonth() != activeDate.getMonth();