docs/source/DateField.html

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