oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui-ext/docs/output/DateField.jss.html
JT Smith 547ced6500 upgraded yui to 2.2.2 and yui-ext to 1.0.1a
2007-07-05 04:23:55 +00:00

244 lines
No EOL
11 KiB
HTML
Raw Blame History

<html><head><title>DateField.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>DateField.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.form.DateField
* @extends Ext.form.TriggerField
* Provides a date input field <b>with</b> a {@link Ext.DatePicker} dropdown and automatic date validation.
* @constructor
* Create a <b>new</b> DateField
* @param {Object} config
*/</i>
Ext.form.DateField = <b>function</b>(config){
Ext.form.DateField.superclass.constructor.call(<b>this</b>, config);
<b>if</b>(typeof <b>this</b>.minValue == &quot;string&quot;) <b>this</b>.minValue = <b>this</b>.parseDate(<b>this</b>.minValue);
<b>if</b>(typeof <b>this</b>.maxValue == &quot;string&quot;) <b>this</b>.maxValue = <b>this</b>.parseDate(<b>this</b>.maxValue);
<b>this</b>.ddMatch = null;
<b>if</b>(this.disabledDates){
<b>var</b> dd = <b>this</b>.disabledDates;
<b>var</b> re = &quot;(?:&quot;;
<b>for</b>(var i = 0; i &lt; dd.length; i++){
re += dd[i];
<b>if</b>(i != dd.length-1) re += &quot;|&quot;;
}
<b>this</b>.ddMatch = <b>new</b> RegExp(re + &quot;)&quot;);
}
};
Ext.extend(Ext.form.DateField, Ext.form.TriggerField, {
<i>/**
* @cfg {String} format
* The <b>default</b> date format string which can be overriden <b>for</b> localization support. The format must be
* valid according to {@link Date#parseDate} (defaults to 'm/d/y').
*/</i>
format : &quot;m/d/y&quot;,
<i>/**
* @cfg {Array} disabledDays
* An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
*/</i>
disabledDays : null,
<i>/**
* @cfg {String} disabledDaysText
* The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
*/</i>
disabledDaysText : &quot;Disabled&quot;,
<i>/**
* @cfg {Array} disabledDates
* An array of &quot;dates&quot; to disable, as strings. These strings will be used to build a dynamic regular
* expression so they are very powerful. Some examples:
* &lt;ul&gt;
* &lt;li&gt;[&quot;03/08/2003&quot;, &quot;09/16/2003&quot;] would disable those exact dates&lt;/li&gt;
* &lt;li&gt;[&quot;03/08&quot;, &quot;09/16&quot;] would disable those days <b>for</b> every year&lt;/li&gt;
* &lt;li&gt;[&quot;^03/08&quot;] would only match the beginning (useful <b>if</b> you are using short years)&lt;/li&gt;
* &lt;li&gt;[&quot;03/../2006&quot;] would disable every day <b>in</b> March 2006&lt;/li&gt;
* &lt;li&gt;[&quot;^03&quot;] would disable every day <b>in</b> every March&lt;/li&gt;
* &lt;/ul&gt;
* In order to support regular expressions, <b>if</b> you are using a date format that has &quot;.&quot; <b>in</b> it, you will have to
* escape the dot when restricting dates. For example: [&quot;03\\.08\\.03&quot;].
*/</i>
disabledDates : null,
<i>/**
* @cfg {String} disabledDatesText
* The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
*/</i>
disabledDatesText : &quot;Disabled&quot;,
<i>/**
* @cfg {Date/String} minValue
* The minimum allowed date. Can be either a Javascript date object or a string date <b>in</b> a
* valid format (defaults to null).
*/</i>
minValue : null,
<i>/**
* @cfg {Date/String} maxValue
* The maximum allowed date. Can be either a Javascript date object or a string date <b>in</b> a
* valid format (defaults to null).
*/</i>
maxValue : null,
<i>/**
* @cfg {String} minText
* The error text to display when the date <b>in</b> the cell is before minValue (defaults to
* 'The date <b>in</b> this field must be after {minValue}').
*/</i>
minText : &quot;The date <b>in</b> this field must be after {0}&quot;,
<i>/**
* @cfg {String} maxText
* The error text to display when the date <b>in</b> the cell is before maxValue (defaults to
* 'The date <b>in</b> this field must be before {maxValue}').
*/</i>
maxText : &quot;The date <b>in</b> this field must be before {0}&quot;,
<i>/**
* @cfg {String} invalidText
* The error to display when the date <b>in</b> the field is invalid (defaults to
* '{value} is not a valid date - it must be <b>in</b> the format {format}').
*/</i>
invalidText : &quot;{0} is not a valid date - it must be <b>in</b> the format {1}&quot;,
<i>/**
* @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 &lt;b&gt;appended&lt;/b&gt; <b>if</b> specified (defaults to 'x-form-date-trigger'
* which displays a calendar icon).
*/</i>
triggerClass : 'x-form-date-trigger',
<i>/**
* @cfg {String/Object} autoCreate
* A DomHelper element spec, or true <b>for</b> a <b>default</b> element spec (defaults to
* {tag: &quot;input&quot;, type: &quot;text&quot;, size: &quot;10&quot;, autocomplete: &quot;off&quot;})
*/</i>
<i>// private</i>
defaultAutoCreate : {tag: &quot;input&quot;, type: &quot;text&quot;, size: &quot;10&quot;, autocomplete: &quot;off&quot;},
<i>// private</i>
validateValue : <b>function</b>(value){
value = <b>this</b>.formatDate(value);
<b>if</b>(!Ext.form.DateField.superclass.validateValue.call(<b>this</b>, value)){
<b>return</b> false;
}
<b>if</b>(value.length &lt; 1){ <i>// <b>if</b> it's blank and textfield didn't flag it then it's valid</i>
<b>return</b> true;
}
<b>var</b> svalue = value;
value = <b>this</b>.parseDate(value);
<b>if</b>(!value){
<b>this</b>.markInvalid(String.format(<b>this</b>.invalidText, svalue, <b>this</b>.format));
<b>return</b> false;
}
<b>var</b> time = value.getTime();
<b>if</b>(this.minValue &amp;&amp; time &lt; <b>this</b>.minValue.getTime()){
<b>this</b>.markInvalid(String.format(<b>this</b>.minText, <b>this</b>.formatDate(<b>this</b>.minValue)));
<b>return</b> false;
}
<b>if</b>(this.maxValue &amp;&amp; time &gt; <b>this</b>.maxValue.getTime()){
<b>this</b>.markInvalid(String.format(<b>this</b>.maxText, <b>this</b>.formatDate(<b>this</b>.maxValue)));
<b>return</b> false;
}
<b>if</b>(this.disabledDays){
<b>var</b> day = value.getDay();
<b>for</b>(var i = 0; i &lt; <b>this</b>.disabledDays.length; i++) {
<b>if</b>(day === <b>this</b>.disabledDays[i]){
<b>this</b>.markInvalid(<b>this</b>.disabledDaysText);
<b>return</b> false;
}
}
}
<b>var</b> fvalue = <b>this</b>.formatDate(value);
<b>if</b>(this.ddMatch &amp;&amp; <b>this</b>.ddMatch.test(fvalue)){
<b>this</b>.markInvalid(String.format(<b>this</b>.disabledDatesText, fvalue));
<b>return</b> false;
}
<b>return</b> true;
},
<i>// private</i>
<i>// Provides logic to override the <b>default</b> TriggerField.validateBlur which just returns true</i>
validateBlur : <b>function</b>(){
<b>return</b> !<b>this</b>.menu || !<b>this</b>.menu.isVisible();
},
<i>/**
* Returns the current date value of the date field
* @<b>return</b> {Date} value The date value
*/</i>
getValue : <b>function</b>(){
<b>return</b> this.parseDate(Ext.form.DateField.superclass.getValue.call(<b>this</b>)) || &quot;&quot;;
},
<i>/**
* 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 <b>default</b> format used is &quot;m/d/y&quot;).
* &lt;br /&gt;Usage:
* &lt;pre&gt;&lt;code&gt;
<i>//All of these calls set the same date value (May 4, 2006)</i>
<i>//Pass a date object:</i>
<b>var</b> dt = <b>new</b> Date('5/4/06');
dateField.setValue(dt);
<i>//Pass a date string (<b>default</b> format):</i>
dateField.setValue('5/4/06');
<i>//Pass a date string (custom format):</i>
dateField.format = 'Y-m-d';
dateField.setValue('2006-5-4');
&lt;/code&gt;&lt;/pre&gt;
* @param {String/Date} date The date or valid date string
*/</i>
setValue : <b>function</b>(date){
Ext.form.DateField.superclass.setValue.call(<b>this</b>, <b>this</b>.formatDate(<b>this</b>.parseDate(date)));
},
<i>// private</i>
parseDate : <b>function</b>(value){
<b>return</b> (!value || value instanceof Date) ?
value : Date.parseDate(value, <b>this</b>.format);
},
<i>// private</i>
formatDate : <b>function</b>(date){
<b>return</b> (!date || !(date instanceof Date)) ?
date : date.dateFormat(<b>this</b>.format);
},
<i>// private</i>
menuListeners : {
select: <b>function</b>(m, d){
<b>this</b>.setValue(d);
},
show : <b>function</b>(){ <i>// retain focus styling</i>
<b>this</b>.onFocus();
},
hide : <b>function</b>(){
<b>this</b>.focus();
<b>var</b> ml = <b>this</b>.menuListeners;
<b>this</b>.menu.un(&quot;select&quot;, ml.select, <b>this</b>);
<b>this</b>.menu.un(&quot;show&quot;, ml.show, <b>this</b>);
<b>this</b>.menu.un(&quot;hide&quot;, ml.hide, <b>this</b>);
}
},
<i>// private</i>
<i>// Implements the <b>default</b> empty TriggerField.onTriggerClick <b>function</b> to display the DatePicker</i>
onTriggerClick : <b>function</b>(){
<b>if</b>(this.disabled){
<b>return</b>;
}
<b>if</b>(this.menu == null){
<b>this</b>.menu = <b>new</b> Ext.menu.DateMenu();
}
Ext.apply(<b>this</b>.menu.picker, {
minDate : <b>this</b>.minValue,
maxDate : <b>this</b>.maxValue,
disabledDatesRE : <b>this</b>.ddMatch,
disabledDatesText : <b>this</b>.disabledDatesText,
disabledDays : <b>this</b>.disabledDays,
disabledDaysText : <b>this</b>.disabledDaysText,
format : <b>this</b>.format,
minText : String.format(<b>this</b>.minText, <b>this</b>.formatDate(<b>this</b>.minValue)),
maxText : String.format(<b>this</b>.maxText, <b>this</b>.formatDate(<b>this</b>.maxValue))
});
<b>this</b>.menu.on(Ext.apply({}, <b>this</b>.menuListeners, {
scope:<b>this</b>
}));
<b>this</b>.menu.picker.setValue(<b>this</b>.getValue() || <b>new</b> Date());
<b>this</b>.menu.show(<b>this</b>.el, &quot;tl-bl?&quot;);
}
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>
Reference in a new issue View git blame Copy permalink