PDA

View Full Version : Datepicker change month listener



navvn
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?

tobiu
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

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
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.

tobiu
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:
http://docs.sencha.com/ext-js/4-0/source/Date4.html

and search for the exact points you like to modify.

syl_via38
9 Dec 2011, 7:37 AM
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
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);

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.

k0rg0th
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);
me.callParent(arguments);
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();
}
};