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

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > JavaScript > 查看源码
DatePicker.js
资源名称：ext-3.1.0.zip　[点击查看]
上传用户：dawnssy
上传日期：2022-08-06
资源大小：9345k
文件大小：28k
源码类别：

JavaScript

开发平台：

JavaScript

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