Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / DatePicker.html
index d18d332..a6dfb30 100644 (file)
@@ -1,12 +1,18 @@
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.DatePicker"></div>/**
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+<div id="cls-Ext.DatePicker"></div>/**
  * @class Ext.DatePicker
  * @extends Ext.Component
  * <p>A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class
@@ -46,7 +52,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
      * @cfg {Object} scope
      * The scope (<code><b>this</b></code> reference) in which the <code>{@link #handler}</code>
      * function will be called.  Defaults to this DatePicker instance.
-     */ 
+     */
     <div id="cfg-Ext.DatePicker-todayTip"></div>/**
      * @cfg {String} todayTip
      * A string used to format the message for displaying in a tooltip over the button that
@@ -149,11 +155,15 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
      * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
      * escape the dot when restricting dates. For example: ['03\\.08\\.03'].
      */
-    
+
     // private
     // Set by other components to stop the picker focus being updated when the value changes.
     focusOnSelect: true,
 
+    // default value used to initialise each date in the DatePicker
+    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
+    initHour: 12, // 24-hour format
+
     // private
     initComponent : function(){
         Ext.DatePicker.superclass.initComponent.call(this);
@@ -184,7 +194,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
             var dd = this.disabledDates,
                 len = dd.length - 1,
                 re = '(?:';
-                
+
             Ext.each(dd, function(d, i){
                 re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
                 if(i != len){
@@ -260,21 +270,21 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
     focus : function(){
         this.update(this.activeDate);
     },
-    
+
     // private
     onEnable: function(initial){
-        Ext.DatePicker.superclass.onEnable.call(this);    
+        Ext.DatePicker.superclass.onEnable.call(this);
         this.doDisabled(false);
         this.update(initial ? this.value : this.activeDate);
         if(Ext.isIE){
             this.el.repaint();
         }
-        
+
     },
-    
+
     // private
     onDisable : function(){
-        Ext.DatePicker.superclass.onDisable.call(this);   
+        Ext.DatePicker.superclass.onDisable.call(this);
         this.doDisabled(true);
         if(Ext.isIE && !Ext.isIE8){
             /* Really strange problem in IE6/7, when disabled, have to explicitly
@@ -286,7 +296,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
              });
         }
     },
-    
+
     // private
     doDisabled : function(disabled){
         this.keyNav.setDisabled(disabled);
@@ -355,7 +365,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
                 if(e.ctrlKey){
                     this.showPrevMonth();
                 }else{
-                    this.update(this.activeDate.add('d', -1));    
+                    this.update(this.activeDate.add('d', -1));
                 }
             },
 
@@ -363,7 +373,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
                 if(e.ctrlKey){
                     this.showNextMonth();
                 }else{
-                    this.update(this.activeDate.add('d', 1));    
+                    this.update(this.activeDate.add('d', 1));
                 }
             },
 
@@ -630,141 +640,140 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
     // private
     update : function(date, forceRefresh){
         if(this.rendered){
-               var vd = this.activeDate, vis = this.isVisible();
-               this.activeDate = date;
-               if(!forceRefresh && vd && this.el){
-                   var t = date.getTime();
-                   if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
-                       this.cells.removeClass('x-date-selected');
-                       this.cells.each(function(c){
-                          if(c.dom.firstChild.dateValue == t){
-                              c.addClass('x-date-selected');
-                              if(vis && !this.cancelFocus){
-                                  Ext.fly(c.dom.firstChild).focus(50);
-                              }
-                              return false;
-                          }
-                       }, this);
-                       return;
-                   }
-               }
-               var days = date.getDaysInMonth(),
-                   firstOfMonth = date.getFirstDateOfMonth(),
-                   startingPos = firstOfMonth.getDay()-this.startDay;
-       
-               if(startingPos < 0){
-                   startingPos += 7;
-               }
-               days += startingPos;
-       
-               var pm = date.add('mo', -1),
-                   prevStart = pm.getDaysInMonth()-startingPos,
-                   cells = this.cells.elements,
-                   textEls = this.textNodes,
-                   // convert everything to numbers so it's fast
-                   day = 86400000,
-                   d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(),
-                   today = new Date().clearTime().getTime(),
-                   sel = date.clearTime(true).getTime(),
-                   min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
-                   max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
-                   ddMatch = this.disabledDatesRE,
-                   ddText = this.disabledDatesText,
-                   ddays = this.disabledDays ? this.disabledDays.join('') : false,
-                   ddaysText = this.disabledDaysText,
-                   format = this.format;
-       
-               if(this.showToday){
-                   var td = new Date().clearTime(),
-                       disable = (td < min || td > max ||
-                       (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
-                       (ddays && ddays.indexOf(td.getDay()) != -1));
-       
-                   if(!this.disabled){
-                       this.todayBtn.setDisabled(disable);
-                       this.todayKeyListener[disable ? 'disable' : 'enable']();
-                   }
-               }
-       
-               var setCellClass = function(cal, cell){
-                   cell.title = '';
-                   var t = d.getTime();
-                   cell.firstChild.dateValue = t;
-                   if(t == today){
-                       cell.className += ' x-date-today';
-                       cell.title = cal.todayText;
-                   }
-                   if(t == sel){
-                       cell.className += ' x-date-selected';
-                       if(vis){
-                           Ext.fly(cell.firstChild).focus(50);
-                       }
-                   }
-                   // disabling
-                   if(t < min) {
-                       cell.className = ' x-date-disabled';
-                       cell.title = cal.minText;
-                       return;
-                   }
-                   if(t > max) {
-                       cell.className = ' x-date-disabled';
-                       cell.title = cal.maxText;
-                       return;
-                   }
-                   if(ddays){
-                       if(ddays.indexOf(d.getDay()) != -1){
-                           cell.title = ddaysText;
-                           cell.className = ' x-date-disabled';
-                       }
-                   }
-                   if(ddMatch && format){
-                       var fvalue = d.dateFormat(format);
-                       if(ddMatch.test(fvalue)){
-                           cell.title = ddText.replace('%0', fvalue);
-                           cell.className = ' x-date-disabled';
-                       }
-                   }
-               };
-       
-               var i = 0;
-               for(; i < startingPos; i++) {
-                   textEls[i].innerHTML = (++prevStart);
-                   d.setDate(d.getDate()+1);
-                   cells[i].className = 'x-date-prevday';
-                   setCellClass(this, cells[i]);
-               }
-               for(; i < days; i++){
-                   var intDay = i - startingPos + 1;
-                   textEls[i].innerHTML = (intDay);
-                   d.setDate(d.getDate()+1);
-                   cells[i].className = 'x-date-active';
-                   setCellClass(this, cells[i]);
-               }
-               var extraDays = 0;
-               for(; i < 42; i++) {
-                    textEls[i].innerHTML = (++extraDays);
-                    d.setDate(d.getDate()+1);
-                    cells[i].className = 'x-date-nextday';
-                    setCellClass(this, cells[i]);
-               }
-       
-               this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
-       
-               if(!this.internalRender){
-                   var main = this.el.dom.firstChild,
-                       w = main.offsetWidth;
-                   this.el.setWidth(w + this.el.getBorderWidth('lr'));
-                   Ext.fly(main).setWidth(w);
-                   this.internalRender = true;
-                   // opera does not respect the auto grow header center column
-                   // then, after it gets a width opera refuses to recalculate
-                   // without a second pass
-                   if(Ext.isOpera && !this.secondPass){
-                       main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
-                       this.secondPass = true;
-                       this.update.defer(10, this, [date]);
-                   }
-               }
+            var vd = this.activeDate, vis = this.isVisible();
+            this.activeDate = date;
+            if(!forceRefresh && vd && this.el){
+                var t = date.getTime();
+                if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
+                    this.cells.removeClass('x-date-selected');
+                    this.cells.each(function(c){
+                       if(c.dom.firstChild.dateValue == t){
+                           c.addClass('x-date-selected');
+                           if(vis && !this.cancelFocus){
+                               Ext.fly(c.dom.firstChild).focus(50);
+                           }
+                           return false;
+                       }
+                    }, this);
+                    return;
+                }
+            }
+            var days = date.getDaysInMonth(),
+                firstOfMonth = date.getFirstDateOfMonth(),
+                startingPos = firstOfMonth.getDay()-this.startDay;
+
+            if(startingPos < 0){
+                startingPos += 7;
+            }
+            days += startingPos;
+
+            var pm = date.add('mo', -1),
+                prevStart = pm.getDaysInMonth()-startingPos,
+                cells = this.cells.elements,
+                textEls = this.textNodes,
+                // convert everything to numbers so it's fast
+                d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)),
+                today = new Date().clearTime().getTime(),
+                sel = date.clearTime(true).getTime(),
+                min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
+                max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
+                ddMatch = this.disabledDatesRE,
+                ddText = this.disabledDatesText,
+                ddays = this.disabledDays ? this.disabledDays.join('') : false,
+                ddaysText = this.disabledDaysText,
+                format = this.format;
+
+            if(this.showToday){
+                var td = new Date().clearTime(),
+                    disable = (td < min || td > max ||
+                    (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
+                    (ddays && ddays.indexOf(td.getDay()) != -1));
+
+                if(!this.disabled){
+                    this.todayBtn.setDisabled(disable);
+                    this.todayKeyListener[disable ? 'disable' : 'enable']();
+                }
+            }
+
+            var setCellClass = function(cal, cell){
+                cell.title = '';
+                var t = d.clearTime(true).getTime();
+                cell.firstChild.dateValue = t;
+                if(t == today){
+                    cell.className += ' x-date-today';
+                    cell.title = cal.todayText;
+                }
+                if(t == sel){
+                    cell.className += ' x-date-selected';
+                    if(vis){
+                        Ext.fly(cell.firstChild).focus(50);
+                    }
+                }
+                // disabling
+                if(t < min) {
+                    cell.className = ' x-date-disabled';
+                    cell.title = cal.minText;
+                    return;
+                }
+                if(t > max) {
+                    cell.className = ' x-date-disabled';
+                    cell.title = cal.maxText;
+                    return;
+                }
+                if(ddays){
+                    if(ddays.indexOf(d.getDay()) != -1){
+                        cell.title = ddaysText;
+                        cell.className = ' x-date-disabled';
+                    }
+                }
+                if(ddMatch && format){
+                    var fvalue = d.dateFormat(format);
+                    if(ddMatch.test(fvalue)){
+                        cell.title = ddText.replace('%0', fvalue);
+                        cell.className = ' x-date-disabled';
+                    }
+                }
+            };
+
+            var i = 0;
+            for(; i < startingPos; i++) {
+                textEls[i].innerHTML = (++prevStart);
+                d.setDate(d.getDate()+1);
+                cells[i].className = 'x-date-prevday';
+                setCellClass(this, cells[i]);
+            }
+            for(; i < days; i++){
+                var intDay = i - startingPos + 1;
+                textEls[i].innerHTML = (intDay);
+                d.setDate(d.getDate()+1);
+                cells[i].className = 'x-date-active';
+                setCellClass(this, cells[i]);
+            }
+            var extraDays = 0;
+            for(; i < 42; i++) {
+                 textEls[i].innerHTML = (++extraDays);
+                 d.setDate(d.getDate()+1);
+                 cells[i].className = 'x-date-nextday';
+                 setCellClass(this, cells[i]);
+            }
+
+            this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
+
+            if(!this.internalRender){
+                var main = this.el.dom.firstChild,
+                    w = main.offsetWidth;
+                this.el.setWidth(w + this.el.getBorderWidth('lr'));
+                Ext.fly(main).setWidth(w);
+                this.internalRender = true;
+                // opera does not respect the auto grow header center column
+                // then, after it gets a width opera refuses to recalculate
+                // without a second pass
+                if(Ext.isOpera && !this.secondPass){
+                    main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
+                    this.secondPass = true;
+                    this.update.defer(10, this, [date]);
+                }
+            }
         }
     },
 
@@ -792,6 +801,6 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
 });
 
 Ext.reg('datepicker', Ext.DatePicker);
-</pre>    \r
-</body>\r
+</pre>    
+</body>
 </html>
\ No newline at end of file