Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / docs / source / DatePicker.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.0
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.DatePicker"></div>/**
16  * @class Ext.DatePicker
17  * @extends Ext.Component
18  * <p>A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class
19  * to allow browsing and selection of valid dates.</p>
20  * <p>All the string values documented below may be overridden by including an Ext locale file in
21  * your page.</p>
22  * @constructor
23  * Create a new DatePicker
24  * @param {Object} config The config object
25  * @xtype datepicker
26  */
27 Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
28     <div id="cfg-Ext.DatePicker-todayText"></div>/**
29      * @cfg {String} todayText
30      * The text to display on the button that selects the current date (defaults to <code>'Today'</code>)
31      */
32     todayText : 'Today',
33     <div id="cfg-Ext.DatePicker-okText"></div>/**
34      * @cfg {String} okText
35      * The text to display on the ok button (defaults to <code>'&#160;OK&#160;'</code> to give the user extra clicking room)
36      */
37     okText : '&#160;OK&#160;',
38     <div id="cfg-Ext.DatePicker-cancelText"></div>/**
39      * @cfg {String} cancelText
40      * The text to display on the cancel button (defaults to <code>'Cancel'</code>)
41      */
42     cancelText : 'Cancel',
43     <div id="cfg-Ext.DatePicker-handler"></div>/**
44      * @cfg {Function} handler
45      * Optional. A function that will handle the select event of this picker.
46      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
47      * <li><code>picker</code> : DatePicker<div class="sub-desc">This DatePicker.</div></li>
48      * <li><code>date</code> : Date<div class="sub-desc">The selected date.</div></li>
49      * </ul></div>
50      */
51     <div id="cfg-Ext.DatePicker-scope"></div>/**
52      * @cfg {Object} scope
53      * The scope (<code><b>this</b></code> reference) in which the <code>{@link #handler}</code>
54      * function will be called.  Defaults to this DatePicker instance.
55      */
56     <div id="cfg-Ext.DatePicker-todayTip"></div>/**
57      * @cfg {String} todayTip
58      * A string used to format the message for displaying in a tooltip over the button that
59      * selects the current date. Defaults to <code>'{0} (Spacebar)'</code> where
60      * the <code>{0}</code> token is replaced by today's date.
61      */
62     todayTip : '{0} (Spacebar)',
63     <div id="cfg-Ext.DatePicker-minText"></div>/**
64      * @cfg {String} minText
65      * The error text to display if the minDate validation fails (defaults to <code>'This date is before the minimum date'</code>)
66      */
67     minText : 'This date is before the minimum date',
68     <div id="cfg-Ext.DatePicker-maxText"></div>/**
69      * @cfg {String} maxText
70      * The error text to display if the maxDate validation fails (defaults to <code>'This date is after the maximum date'</code>)
71      */
72     maxText : 'This date is after the maximum date',
73     <div id="cfg-Ext.DatePicker-format"></div>/**
74      * @cfg {String} format
75      * The default date format string which can be overriden for localization support.  The format must be
76      * valid according to {@link Date#parseDate} (defaults to <code>'m/d/y'</code>).
77      */
78     format : 'm/d/y',
79     <div id="cfg-Ext.DatePicker-disabledDaysText"></div>/**
80      * @cfg {String} disabledDaysText
81      * The tooltip to display when the date falls on a disabled day (defaults to <code>'Disabled'</code>)
82      */
83     disabledDaysText : 'Disabled',
84     <div id="cfg-Ext.DatePicker-disabledDatesText"></div>/**
85      * @cfg {String} disabledDatesText
86      * The tooltip text to display when the date falls on a disabled date (defaults to <code>'Disabled'</code>)
87      */
88     disabledDatesText : 'Disabled',
89     <div id="cfg-Ext.DatePicker-monthNames"></div>/**
90      * @cfg {Array} monthNames
91      * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
92      */
93     monthNames : Date.monthNames,
94     <div id="cfg-Ext.DatePicker-dayNames"></div>/**
95      * @cfg {Array} dayNames
96      * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
97      */
98     dayNames : Date.dayNames,
99     <div id="cfg-Ext.DatePicker-nextText"></div>/**
100      * @cfg {String} nextText
101      * The next month navigation button tooltip (defaults to <code>'Next Month (Control+Right)'</code>)
102      */
103     nextText : 'Next Month (Control+Right)',
104     <div id="cfg-Ext.DatePicker-prevText"></div>/**
105      * @cfg {String} prevText
106      * The previous month navigation button tooltip (defaults to <code>'Previous Month (Control+Left)'</code>)
107      */
108     prevText : 'Previous Month (Control+Left)',
109     <div id="cfg-Ext.DatePicker-monthYearText"></div>/**
110      * @cfg {String} monthYearText
111      * The header month selector tooltip (defaults to <code>'Choose a month (Control+Up/Down to move years)'</code>)
112      */
113     monthYearText : 'Choose a month (Control+Up/Down to move years)',
114     <div id="cfg-Ext.DatePicker-startDay"></div>/**
115      * @cfg {Number} startDay
116      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
117      */
118     startDay : 0,
119     <div id="cfg-Ext.DatePicker-showToday"></div>/**
120      * @cfg {Boolean} showToday
121      * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar
122      * that selects the current date (defaults to <code>true</code>).
123      */
124     showToday : true,
125     <div id="cfg-Ext.DatePicker-minDate"></div>/**
126      * @cfg {Date} minDate
127      * Minimum allowable date (JavaScript date object, defaults to null)
128      */
129     <div id="cfg-Ext.DatePicker-maxDate"></div>/**
130      * @cfg {Date} maxDate
131      * Maximum allowable date (JavaScript date object, defaults to null)
132      */
133     <div id="cfg-Ext.DatePicker-disabledDays"></div>/**
134      * @cfg {Array} disabledDays
135      * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
136      */
137     <div id="cfg-Ext.DatePicker-disabledDatesRE"></div>/**
138      * @cfg {RegExp} disabledDatesRE
139      * JavaScript regular expression used to disable a pattern of dates (defaults to null).  The {@link #disabledDates}
140      * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
141      * disabledDates value.
142      */
143     <div id="cfg-Ext.DatePicker-disabledDates"></div>/**
144      * @cfg {Array} disabledDates
145      * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular
146      * expression so they are very powerful. Some examples:
147      * <ul>
148      * <li>['03/08/2003', '09/16/2003'] would disable those exact dates</li>
149      * <li>['03/08', '09/16'] would disable those days for every year</li>
150      * <li>['^03/08'] would only match the beginning (useful if you are using short years)</li>
151      * <li>['03/../2006'] would disable every day in March 2006</li>
152      * <li>['^03'] would disable every day in every March</li>
153      * </ul>
154      * Note that the format of the dates included in the array should exactly match the {@link #format} config.
155      * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
156      * escape the dot when restricting dates. For example: ['03\\.08\\.03'].
157      */
158
159     // private
160     // Set by other components to stop the picker focus being updated when the value changes.
161     focusOnSelect: true,
162
163     // default value used to initialise each date in the DatePicker
164     // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
165     initHour: 12, // 24-hour format
166
167     // private
168     initComponent : function(){
169         Ext.DatePicker.superclass.initComponent.call(this);
170
171         this.value = this.value ?
172                  this.value.clearTime(true) : new Date().clearTime();
173
174         this.addEvents(
175             <div id="event-Ext.DatePicker-select"></div>/**
176              * @event select
177              * Fires when a date is selected
178              * @param {DatePicker} this DatePicker
179              * @param {Date} date The selected date
180              */
181             'select'
182         );
183
184         if(this.handler){
185             this.on('select', this.handler,  this.scope || this);
186         }
187
188         this.initDisabledDays();
189     },
190
191     // private
192     initDisabledDays : function(){
193         if(!this.disabledDatesRE && this.disabledDates){
194             var dd = this.disabledDates,
195                 len = dd.length - 1,
196                 re = '(?:';
197
198             Ext.each(dd, function(d, i){
199                 re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
200                 if(i != len){
201                     re += '|';
202                 }
203             }, this);
204             this.disabledDatesRE = new RegExp(re + ')');
205         }
206     },
207
208     <div id="method-Ext.DatePicker-setDisabledDates"></div>/**
209      * Replaces any existing disabled dates with new values and refreshes the DatePicker.
210      * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
211      * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
212      */
213     setDisabledDates : function(dd){
214         if(Ext.isArray(dd)){
215             this.disabledDates = dd;
216             this.disabledDatesRE = null;
217         }else{
218             this.disabledDatesRE = dd;
219         }
220         this.initDisabledDays();
221         this.update(this.value, true);
222     },
223
224     <div id="method-Ext.DatePicker-setDisabledDays"></div>/**
225      * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
226      * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
227      * for details on supported values.
228      */
229     setDisabledDays : function(dd){
230         this.disabledDays = dd;
231         this.update(this.value, true);
232     },
233
234     <div id="method-Ext.DatePicker-setMinDate"></div>/**
235      * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
236      * @param {Date} value The minimum date that can be selected
237      */
238     setMinDate : function(dt){
239         this.minDate = dt;
240         this.update(this.value, true);
241     },
242
243     <div id="method-Ext.DatePicker-setMaxDate"></div>/**
244      * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
245      * @param {Date} value The maximum date that can be selected
246      */
247     setMaxDate : function(dt){
248         this.maxDate = dt;
249         this.update(this.value, true);
250     },
251
252     <div id="method-Ext.DatePicker-setValue"></div>/**
253      * Sets the value of the date field
254      * @param {Date} value The date to set
255      */
256     setValue : function(value){
257         this.value = value.clearTime(true);
258         this.update(this.value);
259     },
260
261     <div id="method-Ext.DatePicker-getValue"></div>/**
262      * Gets the current selected value of the date field
263      * @return {Date} The selected date
264      */
265     getValue : function(){
266         return this.value;
267     },
268
269     // private
270     focus : function(){
271         this.update(this.activeDate);
272     },
273
274     // private
275     onEnable: function(initial){
276         Ext.DatePicker.superclass.onEnable.call(this);
277         this.doDisabled(false);
278         this.update(initial ? this.value : this.activeDate);
279         if(Ext.isIE){
280             this.el.repaint();
281         }
282
283     },
284
285     // private
286     onDisable : function(){
287         Ext.DatePicker.superclass.onDisable.call(this);
288         this.doDisabled(true);
289         if(Ext.isIE && !Ext.isIE8){
290             /* Really strange problem in IE6/7, when disabled, have to explicitly
291              * repaint each of the nodes to get them to display correctly, simply
292              * calling repaint on the main element doesn't appear to be enough.
293              */
294              Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){
295                  Ext.fly(el).repaint();
296              });
297         }
298     },
299
300     // private
301     doDisabled : function(disabled){
302         this.keyNav.setDisabled(disabled);
303         this.prevRepeater.setDisabled(disabled);
304         this.nextRepeater.setDisabled(disabled);
305         if(this.showToday){
306             this.todayKeyListener.setDisabled(disabled);
307             this.todayBtn.setDisabled(disabled);
308         }
309     },
310
311     // private
312     onRender : function(container, position){
313         var m = [
314              '<table cellspacing="0">',
315                 '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr>',
316                 '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'],
317                 dn = this.dayNames,
318                 i;
319         for(i = 0; i < 7; i++){
320             var d = this.startDay+i;
321             if(d > 6){
322                 d = d-7;
323             }
324             m.push('<th><span>', dn[d].substr(0,1), '</span></th>');
325         }
326         m[m.length] = '</tr></thead><tbody><tr>';
327         for(i = 0; i < 42; i++) {
328             if(i % 7 === 0 && i !== 0){
329                 m[m.length] = '</tr><tr>';
330             }
331             m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
332         }
333         m.push('</tr></tbody></table></td></tr>',
334                 this.showToday ? '<tr><td colspan="3" class="x-date-bottom" align="center"></td></tr>' : '',
335                 '</table><div class="x-date-mp"></div>');
336
337         var el = document.createElement('div');
338         el.className = 'x-date-picker';
339         el.innerHTML = m.join('');
340
341         container.dom.insertBefore(el, position);
342
343         this.el = Ext.get(el);
344         this.eventEl = Ext.get(el.firstChild);
345
346         this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), {
347             handler: this.showPrevMonth,
348             scope: this,
349             preventDefault:true,
350             stopDefault:true
351         });
352
353         this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), {
354             handler: this.showNextMonth,
355             scope: this,
356             preventDefault:true,
357             stopDefault:true
358         });
359
360         this.monthPicker = this.el.down('div.x-date-mp');
361         this.monthPicker.enableDisplayMode('block');
362
363         this.keyNav = new Ext.KeyNav(this.eventEl, {
364             'left' : function(e){
365                 if(e.ctrlKey){
366                     this.showPrevMonth();
367                 }else{
368                     this.update(this.activeDate.add('d', -1));
369                 }
370             },
371
372             'right' : function(e){
373                 if(e.ctrlKey){
374                     this.showNextMonth();
375                 }else{
376                     this.update(this.activeDate.add('d', 1));
377                 }
378             },
379
380             'up' : function(e){
381                 if(e.ctrlKey){
382                     this.showNextYear();
383                 }else{
384                     this.update(this.activeDate.add('d', -7));
385                 }
386             },
387
388             'down' : function(e){
389                 if(e.ctrlKey){
390                     this.showPrevYear();
391                 }else{
392                     this.update(this.activeDate.add('d', 7));
393                 }
394             },
395
396             'pageUp' : function(e){
397                 this.showNextMonth();
398             },
399
400             'pageDown' : function(e){
401                 this.showPrevMonth();
402             },
403
404             'enter' : function(e){
405                 e.stopPropagation();
406                 return true;
407             },
408
409             scope : this
410         });
411
412         this.el.unselectable();
413
414         this.cells = this.el.select('table.x-date-inner tbody td');
415         this.textNodes = this.el.query('table.x-date-inner tbody span');
416
417         this.mbtn = new Ext.Button({
418             text: '&#160;',
419             tooltip: this.monthYearText,
420             renderTo: this.el.child('td.x-date-middle', true)
421         });
422         this.mbtn.el.child('em').addClass('x-btn-arrow');
423
424         if(this.showToday){
425             this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);
426             var today = (new Date()).dateFormat(this.format);
427             this.todayBtn = new Ext.Button({
428                 renderTo: this.el.child('td.x-date-bottom', true),
429                 text: String.format(this.todayText, today),
430                 tooltip: String.format(this.todayTip, today),
431                 handler: this.selectToday,
432                 scope: this
433             });
434         }
435         this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
436         this.mon(this.eventEl, 'click', this.handleDateClick,  this, {delegate: 'a.x-date-date'});
437         this.mon(this.mbtn, 'click', this.showMonthPicker, this);
438         this.onEnable(true);
439     },
440
441     // private
442     createMonthPicker : function(){
443         if(!this.monthPicker.dom.firstChild){
444             var buf = ['<table border="0" cellspacing="0">'];
445             for(var i = 0; i < 6; i++){
446                 buf.push(
447                     '<tr><td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>',
448                     '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td>',
449                     i === 0 ?
450                     '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
451                     '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
452                 );
453             }
454             buf.push(
455                 '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
456                     this.okText,
457                     '</button><button type="button" class="x-date-mp-cancel">',
458                     this.cancelText,
459                     '</button></td></tr>',
460                 '</table>'
461             );
462             this.monthPicker.update(buf.join(''));
463
464             this.mon(this.monthPicker, 'click', this.onMonthClick, this);
465             this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this);
466
467             this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
468             this.mpYears = this.monthPicker.select('td.x-date-mp-year');
469
470             this.mpMonths.each(function(m, a, i){
471                 i += 1;
472                 if((i%2) === 0){
473                     m.dom.xmonth = 5 + Math.round(i * 0.5);
474                 }else{
475                     m.dom.xmonth = Math.round((i-1) * 0.5);
476                 }
477             });
478         }
479     },
480
481     // private
482     showMonthPicker : function(){
483         if(!this.disabled){
484             this.createMonthPicker();
485             var size = this.el.getSize();
486             this.monthPicker.setSize(size);
487             this.monthPicker.child('table').setSize(size);
488
489             this.mpSelMonth = (this.activeDate || this.value).getMonth();
490             this.updateMPMonth(this.mpSelMonth);
491             this.mpSelYear = (this.activeDate || this.value).getFullYear();
492             this.updateMPYear(this.mpSelYear);
493
494             this.monthPicker.slideIn('t', {duration:0.2});
495         }
496     },
497
498     // private
499     updateMPYear : function(y){
500         this.mpyear = y;
501         var ys = this.mpYears.elements;
502         for(var i = 1; i <= 10; i++){
503             var td = ys[i-1], y2;
504             if((i%2) === 0){
505                 y2 = y + Math.round(i * 0.5);
506                 td.firstChild.innerHTML = y2;
507                 td.xyear = y2;
508             }else{
509                 y2 = y - (5-Math.round(i * 0.5));
510                 td.firstChild.innerHTML = y2;
511                 td.xyear = y2;
512             }
513             this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
514         }
515     },
516
517     // private
518     updateMPMonth : function(sm){
519         this.mpMonths.each(function(m, a, i){
520             m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
521         });
522     },
523
524     // private
525     selectMPMonth : function(m){
526
527     },
528
529     // private
530     onMonthClick : function(e, t){
531         e.stopEvent();
532         var el = new Ext.Element(t), pn;
533         if(el.is('button.x-date-mp-cancel')){
534             this.hideMonthPicker();
535         }
536         else if(el.is('button.x-date-mp-ok')){
537             var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate());
538             if(d.getMonth() != this.mpSelMonth){
539                 // 'fix' the JS rolling date conversion if needed
540                 d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth();
541             }
542             this.update(d);
543             this.hideMonthPicker();
544         }
545         else if((pn = el.up('td.x-date-mp-month', 2))){
546             this.mpMonths.removeClass('x-date-mp-sel');
547             pn.addClass('x-date-mp-sel');
548             this.mpSelMonth = pn.dom.xmonth;
549         }
550         else if((pn = el.up('td.x-date-mp-year', 2))){
551             this.mpYears.removeClass('x-date-mp-sel');
552             pn.addClass('x-date-mp-sel');
553             this.mpSelYear = pn.dom.xyear;
554         }
555         else if(el.is('a.x-date-mp-prev')){
556             this.updateMPYear(this.mpyear-10);
557         }
558         else if(el.is('a.x-date-mp-next')){
559             this.updateMPYear(this.mpyear+10);
560         }
561     },
562
563     // private
564     onMonthDblClick : function(e, t){
565         e.stopEvent();
566         var el = new Ext.Element(t), pn;
567         if((pn = el.up('td.x-date-mp-month', 2))){
568             this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
569             this.hideMonthPicker();
570         }
571         else if((pn = el.up('td.x-date-mp-year', 2))){
572             this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
573             this.hideMonthPicker();
574         }
575     },
576
577     // private
578     hideMonthPicker : function(disableAnim){
579         if(this.monthPicker){
580             if(disableAnim === true){
581                 this.monthPicker.hide();
582             }else{
583                 this.monthPicker.slideOut('t', {duration:0.2});
584             }
585         }
586     },
587
588     // private
589     showPrevMonth : function(e){
590         this.update(this.activeDate.add('mo', -1));
591     },
592
593     // private
594     showNextMonth : function(e){
595         this.update(this.activeDate.add('mo', 1));
596     },
597
598     // private
599     showPrevYear : function(){
600         this.update(this.activeDate.add('y', -1));
601     },
602
603     // private
604     showNextYear : function(){
605         this.update(this.activeDate.add('y', 1));
606     },
607
608     // private
609     handleMouseWheel : function(e){
610         e.stopEvent();
611         if(!this.disabled){
612             var delta = e.getWheelDelta();
613             if(delta > 0){
614                 this.showPrevMonth();
615             } else if(delta < 0){
616                 this.showNextMonth();
617             }
618         }
619     },
620
621     // private
622     handleDateClick : function(e, t){
623         e.stopEvent();
624         if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){
625             this.cancelFocus = this.focusOnSelect === false;
626             this.setValue(new Date(t.dateValue));
627             delete this.cancelFocus;
628             this.fireEvent('select', this, this.value);
629         }
630     },
631
632     // private
633     selectToday : function(){
634         if(this.todayBtn && !this.todayBtn.disabled){
635             this.setValue(new Date().clearTime());
636             this.fireEvent('select', this, this.value);
637         }
638     },
639
640     // private
641     update : function(date, forceRefresh){
642         if(this.rendered){
643             var vd = this.activeDate, vis = this.isVisible();
644             this.activeDate = date;
645             if(!forceRefresh && vd && this.el){
646                 var t = date.getTime();
647                 if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
648                     this.cells.removeClass('x-date-selected');
649                     this.cells.each(function(c){
650                        if(c.dom.firstChild.dateValue == t){
651                            c.addClass('x-date-selected');
652                            if(vis && !this.cancelFocus){
653                                Ext.fly(c.dom.firstChild).focus(50);
654                            }
655                            return false;
656                        }
657                     }, this);
658                     return;
659                 }
660             }
661             var days = date.getDaysInMonth(),
662                 firstOfMonth = date.getFirstDateOfMonth(),
663                 startingPos = firstOfMonth.getDay()-this.startDay;
664
665             if(startingPos < 0){
666                 startingPos += 7;
667             }
668             days += startingPos;
669
670             var pm = date.add('mo', -1),
671                 prevStart = pm.getDaysInMonth()-startingPos,
672                 cells = this.cells.elements,
673                 textEls = this.textNodes,
674                 // convert everything to numbers so it's fast
675                 d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)),
676                 today = new Date().clearTime().getTime(),
677                 sel = date.clearTime(true).getTime(),
678                 min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
679                 max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
680                 ddMatch = this.disabledDatesRE,
681                 ddText = this.disabledDatesText,
682                 ddays = this.disabledDays ? this.disabledDays.join('') : false,
683                 ddaysText = this.disabledDaysText,
684                 format = this.format;
685
686             if(this.showToday){
687                 var td = new Date().clearTime(),
688                     disable = (td < min || td > max ||
689                     (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
690                     (ddays && ddays.indexOf(td.getDay()) != -1));
691
692                 if(!this.disabled){
693                     this.todayBtn.setDisabled(disable);
694                     this.todayKeyListener[disable ? 'disable' : 'enable']();
695                 }
696             }
697
698             var setCellClass = function(cal, cell){
699                 cell.title = '';
700                 var t = d.clearTime(true).getTime();
701                 cell.firstChild.dateValue = t;
702                 if(t == today){
703                     cell.className += ' x-date-today';
704                     cell.title = cal.todayText;
705                 }
706                 if(t == sel){
707                     cell.className += ' x-date-selected';
708                     if(vis){
709                         Ext.fly(cell.firstChild).focus(50);
710                     }
711                 }
712                 // disabling
713                 if(t < min) {
714                     cell.className = ' x-date-disabled';
715                     cell.title = cal.minText;
716                     return;
717                 }
718                 if(t > max) {
719                     cell.className = ' x-date-disabled';
720                     cell.title = cal.maxText;
721                     return;
722                 }
723                 if(ddays){
724                     if(ddays.indexOf(d.getDay()) != -1){
725                         cell.title = ddaysText;
726                         cell.className = ' x-date-disabled';
727                     }
728                 }
729                 if(ddMatch && format){
730                     var fvalue = d.dateFormat(format);
731                     if(ddMatch.test(fvalue)){
732                         cell.title = ddText.replace('%0', fvalue);
733                         cell.className = ' x-date-disabled';
734                     }
735                 }
736             };
737
738             var i = 0;
739             for(; i < startingPos; i++) {
740                 textEls[i].innerHTML = (++prevStart);
741                 d.setDate(d.getDate()+1);
742                 cells[i].className = 'x-date-prevday';
743                 setCellClass(this, cells[i]);
744             }
745             for(; i < days; i++){
746                 var intDay = i - startingPos + 1;
747                 textEls[i].innerHTML = (intDay);
748                 d.setDate(d.getDate()+1);
749                 cells[i].className = 'x-date-active';
750                 setCellClass(this, cells[i]);
751             }
752             var extraDays = 0;
753             for(; i < 42; i++) {
754                  textEls[i].innerHTML = (++extraDays);
755                  d.setDate(d.getDate()+1);
756                  cells[i].className = 'x-date-nextday';
757                  setCellClass(this, cells[i]);
758             }
759
760             this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
761
762             if(!this.internalRender){
763                 var main = this.el.dom.firstChild,
764                     w = main.offsetWidth;
765                 this.el.setWidth(w + this.el.getBorderWidth('lr'));
766                 Ext.fly(main).setWidth(w);
767                 this.internalRender = true;
768                 // opera does not respect the auto grow header center column
769                 // then, after it gets a width opera refuses to recalculate
770                 // without a second pass
771                 if(Ext.isOpera && !this.secondPass){
772                     main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
773                     this.secondPass = true;
774                     this.update.defer(10, this, [date]);
775                 }
776             }
777         }
778     },
779
780     // private
781     beforeDestroy : function() {
782         if(this.rendered){
783             Ext.destroy(
784                 this.keyNav,
785                 this.monthPicker,
786                 this.eventEl,
787                 this.mbtn,
788                 this.nextRepeater,
789                 this.prevRepeater,
790                 this.cells.el,
791                 this.todayBtn
792             );
793             delete this.textNodes;
794             delete this.cells.elements;
795         }
796     }
797
798     <div id="cfg-Ext.DatePicker-autoEl"></div>/**
799      * @cfg {String} autoEl @hide
800      */
801 });
802
803 Ext.reg('datepicker', Ext.DatePicker);
804 </pre>    
805 </body>
806 </html>