I never knew Ext.DatePicker Existed!
Posted on | August 26, 2008 |
Did you know Ext JS had a calendar control?
I didn’t until yesterday when after dissection our application at work I discovered we were using a 3rd party calendar from DynamicDrive.com.
Not only was this calendar a bit lame, it also added about three extra JavaScript files (setup file, main calendar file and a language file) and an extra CSS file.
The speed heads out there will tell you that that equals 4 extra http requests, which even if cached is still an overhead if you’re including JavaScript libraries in your app too.
So I set about pulling the original calendar to pieces, mainly because it wasn’t working to start with. This was when I came across the Ext.DatePicker class. After stumbling on the MultiMonth Calendar.
So I figured seeing as though I now know Ext has its own calendar, why not chuck it in bro?
So here’s how it’s done. A basic calendar can be rendered thus:
Ext.onReady(function(){
// this is required for the tooltips.
Ext.QuickTips.init();
var dp = new Ext.DatePicker({
renderTo: Ext.getBody(),
listeners: {
'select': function(date_picker, date){
alert(date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDay());
}
}
});
});
That gives a basic calendar control which when a date is clicked will display an alert with the date format of YYYY-MM-DD. Sooooo simple!! Much nicer then the calendar we were using to.
Floating the Calendar
From here I went a bit further, because the calendar needs to be in a floating div (and I’m too lazy to float it with CSS) I wrapped my calendar control in an Ext.Window (why not, it’s all there!)
Here is the code for a calendar in an Ext.Window
Ext.onReady(function(){
Ext.QuickTips.init();
// define the calendar.
var dp = new Ext.DatePicker({
listeners: {
'select': function(date_picker, date){
// our form element.
var _frm = document.getElementById('date_picker_form');
// date value form inpuit
var _set_day = document.getElementById('set_day');
// set value and submit.
_set_day.value = date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDate();
_frm.submit();
}
}
});
// define the window.
var win = new Ext.Window({
title: 'Date Picker',
closeable: true,
closeAction: 'hide',
id: 'calendar_ctrl',
hidden: true,
resizable: false,
renderTo: Ext.getBody(),
items: [dp] // the date picker from above.
});
});
Now this works fine in FireFox. Internet Explorer however showed a big box the height of the calendar across the page. Bit annoying!! But after a while I found the fix. In the Ext.Window definition add the following:
width:'200px',
height:'200px',
That fixed it for me, and didn’t compromise the calendar display.
That’s chopped out an extra 4 items from our app - another performance win!!
Recommended Reading
- http://extjs.com/deploy/dev/docs/ - DatePicker and Window
James
Comments
2 Responses to “I never knew Ext.DatePicker Existed!”
Leave a Reply
September 4th, 2008 @ 9:43 am
I am new to ExtJS. I was just wondering if you could tell me how to set the default date for the datepicker when it appears. Right now the current date is always displayed in the widget. But sometimes the input already has a date in it, and you want the widget to show that date when it appears. I have tried using myDP.setValue(’09/02/1965′), and get an error. I have also tried setting the value (myDP.value = ‘09/02/1965′) Neither of these works. Any suggestions? (PS - using ExtJS 2.1)
September 4th, 2008 @ 5:22 pm
Hi David,
I’ve had a play around with some more code and the best way to set a default starting point for your calendar is to use the setValue() method on your date object like you have done, but instead pass in a Date object. Like so :
var dp = new Ext.DatePicker({ renderTo: document.body }); var mydate = new Date(); mydate.setFullYear(2008, 8, 11); dp.setValue( mydate ); });Obviously you can shorten the date objects creation code down somewhat but this hopefully gives you a good starting point.
Thanks
James