/* * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com * * http://extjs.com/license */ /** * @class Ext.form.DateField * @extends Ext.form.TriggerField Provides a date input field with a * {@link Ext.DatePicker} dropdown and automatic date validation. * @constructor Create a new DateField * @param {Object} * config */ Ext.form.DateField = Ext.extend(Ext.form.TriggerField, { /** * @cfg {String} format The default date format string which can be * overriden for localization support. The format must be valid * according to {@link Date#parseDate} (defaults to 'm/d/y'). */ format : "m/d/y", /** * @cfg {String} altFormats Multiple date formats separated by "|" to try * when parsing a user input value and it doesn't match the defined * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d'). */ altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d", /** * @cfg {Array} disabledDays An array of days to disable, 0 based. For * example, [0, 6] disables Sunday and Saturday (defaults to null). */ disabledDays : null, /** * @cfg {String} disabledDaysText The tooltip to display when the date falls * on a disabled day (defaults to 'Disabled') */ disabledDaysText : "Disabled", /** * @cfg {Array} disabledDates An array of "dates" to disable, as strings. * These strings will be used to build a dynamic regular expression so * they are very powerful. Some examples: * * 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"]. */ disabledDates : null, /** * @cfg {String} disabledDatesText The tooltip text to display when the date * falls on a disabled date (defaults to 'Disabled') */ disabledDatesText : "Disabled", /** * @cfg {Date/String} minValue The minimum allowed date. Can be either a * Javascript date object or a string date in a valid format (defaults * to null). */ minValue : null, /** * @cfg {Date/String} maxValue The maximum allowed date. Can be either a * Javascript date object or a string date in a valid format (defaults * to null). */ maxValue : null, /** * @cfg {String} minText The error text to display when the date in the cell * is before minValue (defaults to 'The date in this field must be * after {minValue}'). */ minText : "The date in this field must be equal to or after {0}", /** * @cfg {String} maxText The error text to display when the date in the cell * is after maxValue (defaults to 'The date in this field must be * before {maxValue}'). */ maxText : "The date in this field must be equal to or before {0}", /** * @cfg {String} invalidText The error text to display when the date in the * field is invalid (defaults to '{value} is not a valid date - it must * be in the format {format}'). */ invalidText : "{0} is not a valid date - it must be in the format {1}", /** * @cfg {String} triggerClass An additional CSS class used to style the * trigger button. The trigger will always get the class * 'x-form-trigger' and triggerClass will be appended if * specified (defaults to 'x-form-date-trigger' which displays a * calendar icon). */ triggerClass : 'x-form-date-trigger', /** * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a * default element spec (defaults to {tag: "input", type: "text", size: * "10", autocomplete: "off"}) */ // private defaultAutoCreate : { tag : "input", type : "text", size : "10", autocomplete : "off" }, initComponent : function() { Ext.form.DateField.superclass.initComponent.call(this); if (typeof this.minValue == "string") { this.minValue = this.parseDate(this.minValue); } if (typeof this.maxValue == "string") { this.maxValue = this.parseDate(this.maxValue); } this.ddMatch = null; if (this.disabledDates) { var dd = this.disabledDates; var re = "(?:"; for (var i = 0; i < dd.length; i++) { re += dd[i]; if (i != dd.length - 1) re += "|"; } this.ddMatch = new RegExp(re + ")"); } }, // private validateValue : function(value) { value = this.formatDate(value); if (!Ext.form.DateField.superclass.validateValue.call(this, value)) { return false; } if (value.length < 1) { // if it's blank and textfield didn't flag it // then it's valid return true; } var svalue = value; value = this.parseDate(value); if (!value) { this.markInvalid(String.format(this.invalidText, svalue, this.format)); return false; } var time = value.getTime(); if (this.minValue && time < this.minValue.getTime()) { this.markInvalid(String.format(this.minText, this .formatDate(this.minValue))); return false; } if (this.maxValue && time > this.maxValue.getTime()) { this.markInvalid(String.format(this.maxText, this .formatDate(this.maxValue))); return false; } if (this.disabledDays) { var day = value.getDay(); for (var i = 0; i < this.disabledDays.length; i++) { if (day === this.disabledDays[i]) { this.markInvalid(this.disabledDaysText); return false; } } } var fvalue = this.formatDate(value); if (this.ddMatch && this.ddMatch.test(fvalue)) { this.markInvalid(String.format(this.disabledDatesText, fvalue)); return false; } return true; }, // private // Provides logic to override the default TriggerField.validateBlur which // just returns true validateBlur : function() { return !this.menu || !this.menu.isVisible(); }, /** * Returns the current date value of the date field. * * @return {Date} The date value */ getValue : function() { return this .parseDate(Ext.form.DateField.superclass.getValue.call(this)) || ""; }, /** * Sets the value of the date field. You can pass a date object or any * string that can be parsed into a valid date, using DateField.format as * the date format, according to the same rules as {@link Date#parseDate} * (the default format used is "m/d/y").
* Usage: * *

	 * //All of these calls set the same date value (May 4, 2006)
	 * 
	 * //Pass a date object:
	 * var dt = new Date('5/4/06');
	 * dateField.setValue(dt);
	 * 
	 * //Pass a date string (default format):
	 * dateField.setValue('5/4/06');
	 * 
	 * //Pass a date string (custom format):
	 * dateField.format = 'Y-m-d';
	 * dateField.setValue('2006-5-4');
	 * 
* * @param {String/Date} * date The date or valid date string */ setValue : function(date) { Ext.form.DateField.superclass.setValue.call(this, this.formatDate(this .parseDate(date))); }, // private parseDate : function(value) { if (!value || value instanceof Date) { return value; } var v = Date.parseDate(value, this.format); if (!v && this.altFormats) { if (!this.altFormatsArray) { this.altFormatsArray = this.altFormats.split("|"); } for (var i = 0, len = this.altFormatsArray.length; i < len && !v; i++) { v = Date.parseDate(value, this.altFormatsArray[i]); } } return v; }, // private onDestroy : function() { if (this.wrap) { this.wrap.remove(); } Ext.form.DateField.superclass.onDestroy.call(this); }, // private formatDate : function(date) { return (!date || !(date instanceof Date)) ? date : date .dateFormat(this.format); }, // private menuListeners : { select : function(m, d) { this.setValue(d); }, show : function() { // retain focus styling this.onFocus(); }, hide : function() { this.focus.defer(10, this); var ml = this.menuListeners; this.menu.un("select", ml.select, this); this.menu.un("show", ml.show, this); this.menu.un("hide", ml.hide, this); } }, // private // Implements the default empty TriggerField.onTriggerClick function to // display the DatePicker onTriggerClick : function() { if (this.disabled) { return; } if (this.menu == null) { this.menu = new Ext.menu.DateMenu(); } Ext.apply(this.menu.picker, { minDate : this.minValue, maxDate : this.maxValue, disabledDatesRE : this.ddMatch, disabledDatesText : this.disabledDatesText, disabledDays : this.disabledDays, disabledDaysText : this.disabledDaysText, format : this.format, minText : String.format(this.minText, this .formatDate(this.minValue)), maxText : String.format(this.maxText, this .formatDate(this.maxValue)) }); this.menu.on(Ext.apply({}, this.menuListeners, { scope : this })); this.menu.picker.setValue(this.getValue() || allGetServerTime()); this.menu.show(this.el, "tl-bl?"); }, beforeBlur : function() { var v = this.parseDate(this.getRawValue()); if (v) { this.setValue(v); } } /** * @cfg {Boolean} grow * @hide */ /** * @cfg {Number} growMin * @hide */ /** * @cfg {Number} growMax * @hide */ /** * @hide * @method autoSize */ }); Ext.reg('datefield', Ext.form.DateField);