开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
DatePicker.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：27k
源码类别：

中间件编程

开发平台：

JavaScript

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