View Full Version : Date Picker Customization

8 Jul 2012, 11:24 PM
I want to change the Datepicker component . Currently Extjs date picker is showing Month and year together and on click of next button it will go to next month . I need to change it , I want split year and month separately. And for year and month i need to implement previous and next functionality . Please help me out how i can achieve this . Please find the attached.

9 Jul 2012, 1:42 AM
Please give me the solution at the earliest .

9 Jul 2012, 9:58 AM
You will need to create a custom extension for this.
There are no settings available for this by default.

There are few other datepicker extensions in the Plugins/Extension forums where you can review some of the other extensions.

If you are unable to do this, then you may have to contact someone at


9 Jul 2012, 9:31 PM
Where actually this datepicker code lies . I am looking in Ext-all.js . In that file i didnt find any code . I need to look into the code .

10 Jul 2012, 7:53 AM
The actual code is in /src/picker/Date.js

You will want to create an extension and not modify Date.js or ext-all.js


10 Jul 2012, 11:46 PM
Why i should not change Date.js ?

11 Jul 2012, 6:26 AM
It is better to create an extension than to modify the original source directly.


11 Jul 2012, 9:01 PM
Ok . Thats fine . But still i have changed something in Date.js like i removed Today from the footer . But its not reflecting why its so ?

12 Jul 2012, 5:14 AM
I have created an extension of Date.js and that Xtype i am using . Its working . Thanks . Here one requirement is there like if we see the July month calendar in attachment the last row belongs to next month August , i dont want to show that row . If i look into Date.js file there numdays is intialized to 42 and its always creating 7 rows . If all the dates belongs to next month i dont want to show that row also . I think you got it . numdays should get intialize dynamically . please see the attachment.

12 Jul 2012, 8:04 AM
So you understand the issue with Date.js ... this is the source code used to create our main distribution files (extjs-all.js, etc). If you where to recompile the code using our SDK, then the changes would be reflected. This is the reason for creating an extension/override when using the main lib.

You can create a hard array for each month to determine the # days you want to display, or write a function to find the dom:


17 Jul 2012, 5:12 AM
I have created extension of Date.js . In that i have added this code in before render function .
var noofdaysinmonth=Ext.Date.getDaysInMonth(this.value),
firstOfMonth = Ext.Date.getFirstDateOfMonth(this.value),
startingPos = firstOfMonth.getDay() ,
nuofday=(startingPos+noofdaysinmonth)/7 ;
var me = this,
days = new Array(me.numDays)

this is working fine for on load . Its removing the last row . But for the next month or next year its not changing dynamically . because this beforerender will get call on load only .