src/widgets/form/DateField.js

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