New file |
0,0 → 1,304 |
/* |
* Ext JS Library 2.0.2 |
* Copyright(c) 2006-2008, 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|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", |
/** |
* @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: |
* <ul> |
* <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li> |
* <li>["03/08", "09/16"] would disable those days for every year</li> |
* <li>["^03/08"] would only match the beginning (useful if you are using short years)</li> |
* <li>["03/../2006"] would disable every day in March 2006</li> |
* <li>["^03"] would disable every day in every March</li> |
* </ul> |
* 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 <b>appended</b> 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"). |
* <br />Usage: |
* <pre><code> |
//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'); |
</code></pre> |
* @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 || Ext.isDate(value)){ |
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.menu) { |
this.menu.destroy(); |
} |
if(this.wrap){ |
this.wrap.remove(); |
} |
Ext.form.DateField.superclass.onDestroy.call(this); |
}, |
|
// private |
formatDate : function(date){ |
return Ext.isDate(date) ? date.dateFormat(this.format) : date; |
}, |
|
// 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() || new Date()); |
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); |