docs/source/DateField.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.form.DateField"></div>/**
  15  * @class Ext.form.DateField
  16  * @extends Ext.form.TriggerField
  17  * Provides a date input field with a {@link Ext.DatePicker} dropdown and automatic date validation.
  18  * @constructor
  19  * Create a new DateField
  20  * @param {Object} config
  21  * @xtype datefield
  22  */
  23 Ext.form.DateField = Ext.extend(Ext.form.TriggerField,  {
  24     <div id="cfg-Ext.form.DateField-format"></div>/**
  25      * @cfg {String} format
  26      * The default date format string which can be overriden for localization support.  The format must be
  27      * valid according to {@link Date#parseDate} (defaults to <tt>'m/d/Y'</tt>).
  28      */
  29     format : "m/d/Y",
  30     <div id="cfg-Ext.form.DateField-altFormats"></div>/**
  31      * @cfg {String} altFormats
  32      * Multiple date formats separated by "<tt>|</tt>" to try when parsing a user input value and it
  33      * does not match the defined format (defaults to
  34      * <tt>'m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'</tt>).
  35      */
  36     altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d",
  37     <div id="cfg-Ext.form.DateField-disabledDaysText"></div>/**
  38      * @cfg {String} disabledDaysText
  39      * The tooltip to display when the date falls on a disabled day (defaults to <tt>'Disabled'</tt>)
  40      */
  41     disabledDaysText : "Disabled",
  42     <div id="cfg-Ext.form.DateField-disabledDatesText"></div>/**
  43      * @cfg {String} disabledDatesText
  44      * The tooltip text to display when the date falls on a disabled date (defaults to <tt>'Disabled'</tt>)
  45      */
  46     disabledDatesText : "Disabled",
  47     <div id="cfg-Ext.form.DateField-minText"></div>/**
  48      * @cfg {String} minText
  49      * The error text to display when the date in the cell is before <tt>{@link #minValue}</tt> (defaults to
  50      * <tt>'The date in this field must be after {minValue}'</tt>).
  51      */
  52     minText : "The date in this field must be equal to or after {0}",
  53     <div id="cfg-Ext.form.DateField-maxText"></div>/**
  54      * @cfg {String} maxText
  55      * The error text to display when the date in the cell is after <tt>{@link #maxValue}</tt> (defaults to
  56      * <tt>'The date in this field must be before {maxValue}'</tt>).
  57      */
  58     maxText : "The date in this field must be equal to or before {0}",
  59     <div id="cfg-Ext.form.DateField-invalidText"></div>/**
  60      * @cfg {String} invalidText
  61      * The error text to display when the date in the field is invalid (defaults to
  62      * <tt>'{value} is not a valid date - it must be in the format {format}'</tt>).
  63      */
  64     invalidText : "{0} is not a valid date - it must be in the format {1}",
  65     <div id="cfg-Ext.form.DateField-triggerClass"></div>/**
  66      * @cfg {String} triggerClass
  67      * An additional CSS class used to style the trigger button.  The trigger will always get the
  68      * class <tt>'x-form-trigger'</tt> and <tt>triggerClass</tt> will be <b>appended</b> if specified
  69      * (defaults to <tt>'x-form-date-trigger'</tt> which displays a calendar icon).
  70      */
  71     triggerClass : 'x-form-date-trigger',
  72     <div id="cfg-Ext.form.DateField-showToday"></div>/**
  73      * @cfg {Boolean} showToday
  74      * <tt>false</tt> to hide the footer area of the DatePicker containing the Today button and disable
  75      * the keyboard handler for spacebar that selects the current date (defaults to <tt>true</tt>).
  76      */
  77     showToday : true,
  78     <div id="cfg-Ext.form.DateField-minValue"></div>/**
  79      * @cfg {Date/String} minValue
  80      * The minimum allowed date. Can be either a Javascript date object or a string date in a
  81      * valid format (defaults to null).
  82      */
  83     <div id="cfg-Ext.form.DateField-maxValue"></div>/**
  84      * @cfg {Date/String} maxValue
  85      * The maximum allowed date. Can be either a Javascript date object or a string date in a
  86      * valid format (defaults to null).
  87      */
  88     <div id="cfg-Ext.form.DateField-disabledDays"></div>/**
  89      * @cfg {Array} disabledDays
  90      * An array of days to disable, 0 based (defaults to null). Some examples:<pre><code>
  91 // disable Sunday and Saturday:
  92 disabledDays:  [0, 6]
  93 // disable weekdays:
  94 disabledDays: [1,2,3,4,5]
  95      * </code></pre>
  96      */
  97     <div id="cfg-Ext.form.DateField-disabledDates"></div>/**
  98      * @cfg {Array} disabledDates
  99      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
 100      * expression so they are very powerful. Some examples:<pre><code>
 101 // disable these exact dates:
 102 disabledDates: ["03/08/2003", "09/16/2003"]
 103 // disable these days for every year:
 104 disabledDates: ["03/08", "09/16"]
 105 // only match the beginning (useful if you are using short years):
 106 disabledDates: ["^03/08"]
 107 // disable every day in March 2006:
 108 disabledDates: ["03/../2006"]
 109 // disable every day in every March:
 110 disabledDates: ["^03"]
 111      * </code></pre>
 112      * Note that the format of the dates included in the array should exactly match the {@link #format} config.
 113      * In order to support regular expressions, if you are using a {@link #format date format} that has "." in
 114      * it, you will have to escape the dot when restricting dates. For example: <tt>["03\\.08\\.03"]</tt>.
 115      */
 116     <div id="cfg-Ext.form.DateField-autoCreate"></div>/**
 117      * @cfg {String/Object} autoCreate
 118      * A {@link Ext.DomHelper DomHelper element specification object}, or <tt>true</tt> for the default element
 119      * specification object:<pre><code>
 120      * autoCreate: {tag: "input", type: "text", size: "10", autocomplete: "off"}
 121      * </code></pre>
 122      */
 123
 124     // private
 125     defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
 126
 127     initComponent : function(){
 128         Ext.form.DateField.superclass.initComponent.call(this);
 129
 130         this.addEvents(
 131             <div id="event-Ext.form.DateField-select"></div>/**
 132              * @event select
 133              * Fires when a date is selected via the date picker.
 134              * @param {Ext.form.DateField} this
 135              * @param {Date} date The date that was selected
 136              */
 137             'select'
 138         );
 139
 140         if(Ext.isString(this.minValue)){
 141             this.minValue = this.parseDate(this.minValue);
 142         }
 143         if(Ext.isString(this.maxValue)){
 144             this.maxValue = this.parseDate(this.maxValue);
 145         }
 146         this.disabledDatesRE = null;
 147         this.initDisabledDays();
 148     },
 149
 150     // private
 151     initDisabledDays : function(){
 152         if(this.disabledDates){
 153             var dd = this.disabledDates,
 154                 len = dd.length - 1,
 155                 re = "(?:";
 156
 157             Ext.each(dd, function(d, i){
 158                 re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
 159                 if(i != len){
 160                     re += '|';
 161                 }
 162             }, this);
 163             this.disabledDatesRE = new RegExp(re + ')');
 164         }
 165     },
 166
 167     <div id="method-Ext.form.DateField-setDisabledDates"></div>/**
 168      * Replaces any existing disabled dates with new values and refreshes the DatePicker.
 169      * @param {Array} disabledDates An array of date strings (see the <tt>{@link #disabledDates}</tt> config
 170      * for details on supported values) used to disable a pattern of dates.
 171      */
 172     setDisabledDates : function(dd){
 173         this.disabledDates = dd;
 174         this.initDisabledDays();
 175         if(this.menu){
 176             this.menu.picker.setDisabledDates(this.disabledDatesRE);
 177         }
 178     },
 179
 180     <div id="method-Ext.form.DateField-setDisabledDays"></div>/**
 181      * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
 182      * @param {Array} disabledDays An array of disabled day indexes. See the <tt>{@link #disabledDays}</tt>
 183      * config for details on supported values.
 184      */
 185     setDisabledDays : function(dd){
 186         this.disabledDays = dd;
 187         if(this.menu){
 188             this.menu.picker.setDisabledDays(dd);
 189         }
 190     },
 191
 192     <div id="method-Ext.form.DateField-setMinValue"></div>/**
 193      * Replaces any existing <tt>{@link #minValue}</tt> with the new value and refreshes the DatePicker.
 194      * @param {Date} value The minimum date that can be selected
 195      */
 196     setMinValue : function(dt){
 197         this.minValue = (Ext.isString(dt) ? this.parseDate(dt) : dt);
 198         if(this.menu){
 199             this.menu.picker.setMinDate(this.minValue);
 200         }
 201     },
 202
 203     <div id="method-Ext.form.DateField-setMaxValue"></div>/**
 204      * Replaces any existing <tt>{@link #maxValue}</tt> with the new value and refreshes the DatePicker.
 205      * @param {Date} value The maximum date that can be selected
 206      */
 207     setMaxValue : function(dt){
 208         this.maxValue = (Ext.isString(dt) ? this.parseDate(dt) : dt);
 209         if(this.menu){
 210             this.menu.picker.setMaxDate(this.maxValue);
 211         }
 212     },
 213
 214     // private
 215     validateValue : function(value){
 216         value = this.formatDate(value);
 217         if(!Ext.form.DateField.superclass.validateValue.call(this, value)){
 218             return false;
 219         }
 220         if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
 221              return true;
 222         }
 223         var svalue = value;
 224         value = this.parseDate(value);
 225         if(!value){
 226             this.markInvalid(String.format(this.invalidText, svalue, this.format));
 227             return false;
 228         }
 229         var time = value.getTime();
 230         if(this.minValue && time < this.minValue.getTime()){
 231             this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
 232             return false;
 233         }
 234         if(this.maxValue && time > this.maxValue.getTime()){
 235             this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
 236             return false;
 237         }
 238         if(this.disabledDays){
 239             var day = value.getDay();
 240             for(var i = 0; i < this.disabledDays.length; i++) {
 241                 if(day === this.disabledDays[i]){
 242                     this.markInvalid(this.disabledDaysText);
 243                     return false;
 244                 }
 245             }
 246         }
 247         var fvalue = this.formatDate(value);
 248         if(this.disabledDatesRE && this.disabledDatesRE.test(fvalue)){
 249             this.markInvalid(String.format(this.disabledDatesText, fvalue));
 250             return false;
 251         }
 252         return true;
 253     },
 254
 255     // private
 256     // Provides logic to override the default TriggerField.validateBlur which just returns true
 257     validateBlur : function(){
 258         return !this.menu || !this.menu.isVisible();
 259     },
 260
 261     <div id="method-Ext.form.DateField-getValue"></div>/**
 262      * Returns the current date value of the date field.
 263      * @return {Date} The date value
 264      */
 265     getValue : function(){
 266         return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || "";
 267     },
 268
 269     <div id="method-Ext.form.DateField-setValue"></div>/**
 270      * Sets the value of the date field.  You can pass a date object or any string that can be
 271      * parsed into a valid date, using <tt>{@link #format}</tt> as the date format, according
 272      * to the same rules as {@link Date#parseDate} (the default format used is <tt>"m/d/Y"</tt>).
 273      * <br />Usage:
 274      * <pre><code>
 275 //All of these calls set the same date value (May 4, 2006)
 276
 277 //Pass a date object:
 278 var dt = new Date('5/4/2006');
 279 dateField.setValue(dt);
 280
 281 //Pass a date string (default format):
 282 dateField.setValue('05/04/2006');
 283
 284 //Pass a date string (custom format):
 285 dateField.format = 'Y-m-d';
 286 dateField.setValue('2006-05-04');
 287 </code></pre>
 288      * @param {String/Date} date The date or valid date string
 289      * @return {Ext.form.Field} this
 290      */
 291     setValue : function(date){
 292         return Ext.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
 293     },
 294
 295     // private
 296     parseDate : function(value){
 297         if(!value || Ext.isDate(value)){
 298             return value;
 299         }
 300         var v = Date.parseDate(value, this.format);
 301         if(!v && this.altFormats){
 302             if(!this.altFormatsArray){
 303                 this.altFormatsArray = this.altFormats.split("|");
 304             }
 305             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
 306                 v = Date.parseDate(value, this.altFormatsArray[i]);
 307             }
 308         }
 309         return v;
 310     },
 311
 312     // private
 313     onDestroy : function(){
 314                 Ext.destroy(this.menu);
 315         Ext.form.DateField.superclass.onDestroy.call(this);
 316     },
 317
 318     // private
 319     formatDate : function(date){
 320         return Ext.isDate(date) ? date.dateFormat(this.format) : date;
 321     },
 322
 323     <div id="method-Ext.form.DateField-onTriggerClick"></div>/**
 324      * @method onTriggerClick
 325      * @hide
 326      */
 327     // private
 328     // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
 329     onTriggerClick : function(){
 330         if(this.disabled){
 331             return;
 332         }
 333         if(this.menu == null){
 334             this.menu = new Ext.menu.DateMenu({
 335                 hideOnClick: false
 336             });
 337         }
 338         this.onFocus();
 339         Ext.apply(this.menu.picker,  {
 340             minDate : this.minValue,
 341             maxDate : this.maxValue,
 342             disabledDatesRE : this.disabledDatesRE,
 343             disabledDatesText : this.disabledDatesText,
 344             disabledDays : this.disabledDays,
 345             disabledDaysText : this.disabledDaysText,
 346             format : this.format,
 347             showToday : this.showToday,
 348             minText : String.format(this.minText, this.formatDate(this.minValue)),
 349             maxText : String.format(this.maxText, this.formatDate(this.maxValue))
 350         });
 351         this.menu.picker.setValue(this.getValue() || new Date());
 352         this.menu.show(this.el, "tl-bl?");
 353         this.menuEvents('on');
 354     },
 355
 356     //private
 357     menuEvents: function(method){
 358         this.menu[method]('select', this.onSelect, this);
 359         this.menu[method]('hide', this.onMenuHide, this);
 360         this.menu[method]('show', this.onFocus, this);
 361     },
 362
 363     onSelect: function(m, d){
 364         this.setValue(d);
 365         this.fireEvent('select', this, d);
 366         this.menu.hide();
 367     },
 368
 369     onMenuHide: function(){
 370         this.focus(false, 60);
 371         this.menuEvents('un');
 372     },
 373
 374     // private
 375     beforeBlur : function(){
 376         var v = this.parseDate(this.getRawValue());
 377         if(v){
 378             this.setValue(v);
 379         }
 380     }
 381
 382     <div id="cfg-Ext.form.DateField-grow"></div>/**
 383      * @cfg {Boolean} grow @hide
 384      */
 385     <div id="cfg-Ext.form.DateField-growMin"></div>/**
 386      * @cfg {Number} growMin @hide
 387      */
 388     <div id="cfg-Ext.form.DateField-growMax"></div>/**
 389      * @cfg {Number} growMax @hide
 390      */
 391     <div id="method-Ext.form.DateField-autoSize"></div>/**
 392      * @hide
 393      * @method autoSize
 394      */
 395 });
 396 Ext.reg('datefield', Ext.form.DateField);</pre>
 397 </body>
 398 </html>