[76] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.4.0 |
---|
| 3 | * Copyright(c) 2006-2011 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 (Date.formatContainsHourInfo(format)) { |
---|
| 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); |
---|