oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui-ext/docs/output/DatePicker.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

480 lines
No EOL
19 KiB
HTML
Raw Blame History

<html><head><title>DatePicker.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>DatePicker.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.DatePicker
* @extends Ext.Component
* Simple date picker class.
* @constructor
* Create a <b>new</b> DatePicker
* @param {Object} config The config object
*/</i>
Ext.DatePicker = <b>function</b>(config){
Ext.DatePicker.superclass.constructor.call(<b>this</b>, config);
<b>this</b>.value = config &amp;&amp; config.value ?
config.value.clearTime() : <b>new</b> Date().clearTime();
<b>this</b>.addEvents({
<i>/**
* @event select
* Fires when a date is selected
* @param {DatePicker} <b>this</b>
* @param {Date} date The selected date
*/</i>
select: true
});
<b>if</b>(this.handler){
<b>this</b>.on(&quot;select&quot;, <b>this</b>.handler, <b>this</b>.scope || <b>this</b>);
}
<i>// build the disabledDatesRE</i>
<b>if</b>(!<b>this</b>.disabledDatesRE &amp;&amp; <b>this</b>.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>.disabledDatesRE = <b>new</b> RegExp(re + &quot;)&quot;);
}
};
Ext.extend(Ext.DatePicker, Ext.Component, {
<i>/**
* @cfg {String} todayText
* The text to display on the button that selects the current date (defaults to &quot;Today&quot;)
*/</i>
todayText : &quot;Today&quot;,
<i>/**
* @cfg {String} todayTip
* The tooltip to display <b>for</b> the button that selects the current date (defaults to &quot;{current date} (Spacebar)&quot;)
*/</i>
todayTip : &quot;{0} (Spacebar)&quot;,
<i>/**
* @cfg {Date} minDate
* Minimum allowable date (JavaScript date object, defaults to null)
*/</i>
minDate : null,
<i>/**
* @cfg {Date} maxDate
* Maximum allowable date (JavaScript date object, defaults to null)
*/</i>
maxDate : null,
<i>/**
* @cfg {String} minText
* The error text to display <b>if</b> the minDate validation fails (defaults to &quot;This date is before the minimum date&quot;)
*/</i>
minText : &quot;This date is before the minimum date&quot;,
<i>/**
* @cfg {String} maxText
* The error text to display <b>if</b> the maxDate validation fails (defaults to &quot;This date is after the maximum date&quot;)
*/</i>
maxText : &quot;This date is after the maximum date&quot;,
<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 &quot;&quot;)
*/</i>
disabledDaysText : &quot;&quot;,
<i>/**
* @cfg {RegExp} disabledDatesRE
* JavaScript regular expression used to disable a pattern of dates (defaults to null)
*/</i>
disabledDatesRE : null,
<i>/**
* @cfg {String} disabledDatesText
* The tooltip text to display when the date falls on a disabled date (defaults to &quot;&quot;)
*/</i>
disabledDatesText : &quot;&quot;,
<i>/**
* @cfg {Boolean} constrainToViewport
* True to constrain the date picker to the viewport (defaults to true)
*/</i>
constrainToViewport : true,
<i>/**
* @cfg {Array} monthNames
* An array of textual month names which can be overriden <b>for</b> localization support (defaults to Date.monthNames)
*/</i>
monthNames : Date.monthNames,
<i>/**
* @cfg {Array} dayNames
* An array of textual day names which can be overriden <b>for</b> localization support (defaults to Date.dayNames)
*/</i>
dayNames : Date.dayNames,
<i>/**
* @cfg {String} nextText
* The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
*/</i>
nextText: 'Next Month (Control+Right)',
<i>/**
* @cfg {String} prevText
* The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
*/</i>
prevText: 'Previous Month (Control+Left)',
<i>/**
* @cfg {String} monthYearText
* The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
*/</i>
monthYearText: 'Choose a month (Control+Up/Down to move years)',
<i>/**
* @cfg {Number} startDay
* Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
*/</i>
startDay : 0,
<i>/**
* Sets the value of the date field
* @param {Date} value The date to set
*/</i>
setValue : <b>function</b>(value){
<b>var</b> old = <b>this</b>.value;
<b>this</b>.value = value.clearTime(true);
<b>if</b>(this.el){
<b>this</b>.update(<b>this</b>.value);
}
},
<i>/**
* Gets the current selected value of the date field
* @<b>return</b> {Date} The selected date
*/</i>
getValue : <b>function</b>(){
<b>return</b> this.value;
},
<i>// private</i>
focus : <b>function</b>(){
<b>if</b>(this.el){
<b>this</b>.update(<b>this</b>.activeDate);
}
},
<i>// private</i>
onRender : <b>function</b>(container, position){
<b>var</b> m = [
'&lt;table cellspacing=&quot;0&quot;&gt;',
'&lt;tr&gt;&lt;td class=&quot;x-date-left&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;', <b>this</b>.prevText ,'&quot;&gt;&amp;#160;&lt;/a&gt;&lt;/td&gt;&lt;td class=&quot;x-date-middle&quot; align=&quot;center&quot;&gt;&lt;/td&gt;&lt;td class=&quot;x-date-right&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;', <b>this</b>.nextText ,'&quot;&gt;&amp;#160;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;',
'&lt;tr&gt;&lt;td colspan=&quot;3&quot;&gt;&lt;table class=&quot;x-date-inner&quot; cellspacing=&quot;0&quot;&gt;&lt;thead&gt;&lt;tr&gt;'];
<b>var</b> dn = <b>this</b>.dayNames;
<b>for</b>(var i = 0; i &lt; 7; i++){
<b>var</b> d = <b>this</b>.startDay+i;
<b>if</b>(d &gt; 6){
d = d-7;
}
m.push(&quot;&lt;th&gt;&lt;span&gt;&quot;, dn[d].substr(0,1), &quot;&lt;/span&gt;&lt;/th&gt;&quot;);
}
m[m.length] = &quot;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&quot;;
<b>for</b>(var i = 0; i &lt; 42; i++) {
<b>if</b>(i % 7 == 0 &amp;&amp; i != 0){
m[m.length] = &quot;&lt;/tr&gt;&lt;tr&gt;&quot;;
}
m[m.length] = '&lt;td&gt;&lt;a href=&quot;#&quot; hidefocus=&quot;on&quot; class=&quot;x-date-date&quot; tabIndex=&quot;1&quot;&gt;&lt;em&gt;&lt;span&gt;&lt;/span&gt;&lt;/em&gt;&lt;/a&gt;&lt;/td&gt;';
}
m[m.length] = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=&quot;3&quot; class=&quot;x-date-bottom&quot; align=&quot;center&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
<b>var</b> el = document.createElement(&quot;div&quot;);
el.className = &quot;x-date-picker&quot;;
el.innerHTML = m.join(&quot;&quot;);
container.dom.insertBefore(el, position);
<b>this</b>.el = Ext.get(el);
<b>new</b> Ext.util.ClickRepeater(<b>this</b>.el.child(&quot;td.x-date-left a&quot;), {handler: <b>this</b>.showPrevMonth, scope: <b>this</b>});
<b>new</b> Ext.util.ClickRepeater(<b>this</b>.el.child(&quot;td.x-date-right a&quot;), {handler: <b>this</b>.showNextMonth, scope: <b>this</b>});
<b>this</b>.el.on(&quot;mousewheel&quot;, <b>this</b>.handleMouseWheel, <b>this</b>);
<b>var</b> kn = <b>new</b> Ext.KeyNav(<b>this</b>.el, {
&quot;left&quot; : <b>function</b>(e){
e.ctrlKey ?
<b>this</b>.showPrevMonth() :
<b>this</b>.update(<b>this</b>.activeDate.add(&quot;d&quot;, -1));
},
&quot;right&quot; : <b>function</b>(e){
e.ctrlKey ?
<b>this</b>.showNextMonth() :
<b>this</b>.update(<b>this</b>.activeDate.add(&quot;d&quot;, 1));
},
&quot;up&quot; : <b>function</b>(e){
e.ctrlKey ?
<b>this</b>.showNextYear() :
<b>this</b>.update(<b>this</b>.activeDate.add(&quot;d&quot;, -7));
},
&quot;down&quot; : <b>function</b>(e){
e.ctrlKey ?
<b>this</b>.showPrevYear() :
<b>this</b>.update(<b>this</b>.activeDate.add(&quot;d&quot;, 7));
},
&quot;pageUp&quot; : <b>function</b>(e){
<b>this</b>.showNextMonth();
},
&quot;pageDown&quot; : <b>function</b>(e){
<b>this</b>.showPrevMonth();
},
&quot;enter&quot; : <b>function</b>(e){
e.stopPropagation();
<b>return</b> true;
},
scope : <b>this</b>
});
<b>this</b>.el.on(&quot;click&quot;, <b>this</b>.handleDateClick, <b>this</b>, {delegate: &quot;a.x-date-date&quot;});
<b>this</b>.el.addKeyListener(Ext.EventObject.SPACE, <b>this</b>.selectToday, <b>this</b>);
<b>this</b>.el.unselectable();
<b>this</b>.cells = <b>this</b>.el.select(&quot;table.x-date-inner tbody td&quot;);
<b>this</b>.textNodes = <b>this</b>.el.query(&quot;table.x-date-inner tbody span&quot;);
<b>var</b> mmenu = <b>new</b> Ext.menu.Menu({
plain:true,
cls: &quot;x-date-mmenu&quot;,
allowOtherMenus : true
});
<b>var</b> menuGroup = Ext.id()+&quot;months&quot;;
<b>for</b>(var i = 0; i &lt; 12; i++){
mmenu.add(<b>new</b> Ext.menu.CheckItem({
id: &quot;mm-&quot;+i,
text: <b>this</b>.monthNames[i],
group:menuGroup,
month: i
}));
}
mmenu.on({
&quot;beforeshow&quot; : <b>function</b>(){
mmenu.items.get(&quot;mm-&quot;+(<b>this</b>.activeDate || <b>this</b>.value).getMonth()).setChecked(true);
},
&quot;itemclick&quot; : <b>function</b>(item){
<b>var</b> d = (<b>this</b>.activeDate || <b>this</b>.value).clone();
d.setMonth(item.month);
<b>this</b>.update(d);
},
&quot;show&quot; : <b>function</b>(m){
<b>this</b>.visibleRegion = m.el.getRegion().adjust(2, 2, -2, -2);
},
&quot;mouseout&quot; : <b>function</b>(m, e){
<b>if</b>(!<b>this</b>.visibleRegion.contains(e.getPoint())){
m.hide();
}
},
scope: <b>this</b>
});
<b>this</b>.mbtn = <b>new</b> Ext.Button(<b>this</b>.el.child(&quot;td.x-date-middle&quot;, true), {
menu: mmenu,
text: &quot;&amp;#160;&quot;,
menuAlign: &quot;c-c?&quot;,
tooltip: <b>this</b>.monthYearText
});
<b>var</b> today = (<b>new</b> Date()).dateFormat(<b>this</b>.format);
<b>var</b> todayBtn = <b>new</b> Ext.Button(<b>this</b>.el.child(&quot;td.x-date-bottom&quot;, true), {
text: String.format(<b>this</b>.todayText, today),
tooltip: String.format(<b>this</b>.todayTip, today),
handler: <b>this</b>.selectToday,
scope: <b>this</b>
});
<b>if</b>(Ext.isIE){
<b>this</b>.el.repaint();
}
<b>this</b>.update(<b>this</b>.value);
},
<i>// private</i>
showPrevMonth : <b>function</b>(e){
<b>this</b>.update(<b>this</b>.activeDate.add(&quot;mo&quot;, -1));
},
<i>// private</i>
showNextMonth : <b>function</b>(e){
<b>this</b>.update(<b>this</b>.activeDate.add(&quot;mo&quot;, 1));
},
<i>// private</i>
showPrevYear : <b>function</b>(){
<b>this</b>.update(<b>this</b>.activeDate.add(&quot;y&quot;, -1));
},
<i>// private</i>
showNextYear : <b>function</b>(){
<b>this</b>.update(<b>this</b>.activeDate.add(&quot;y&quot;, 1));
},
<i>// private</i>
handleMouseWheel : <b>function</b>(e){
<b>var</b> delta = e.getWheelDelta();
<b>if</b>(delta &gt; 0){
<b>this</b>.showPrevMonth();
e.stopEvent();
} <b>else</b> if(delta &lt; 0){
<b>this</b>.showNextMonth();
e.stopEvent();
}
},
<i>// private</i>
handleDateClick : <b>function</b>(e, t){
e.stopEvent();
<b>if</b>(t.dateValue &amp;&amp; !Ext.fly(t.parentNode).hasClass(&quot;x-date-disabled&quot;)){
<b>this</b>.setValue(<b>new</b> Date(t.dateValue));
<b>this</b>.fireEvent(&quot;select&quot;, <b>this</b>, <b>this</b>.value);
}
},
<i>// private</i>
selectToday : <b>function</b>(){
<b>this</b>.setValue(<b>new</b> Date().clearTime());
<b>this</b>.fireEvent(&quot;select&quot;, <b>this</b>, <b>this</b>.value);
},
<i>// private</i>
update : <b>function</b>(date){
<b>var</b> vd = <b>this</b>.activeDate;
<b>this</b>.activeDate = date;
<b>if</b>(vd &amp;&amp; <b>this</b>.el){
<b>var</b> t = date.getTime();
<b>if</b>(vd.getMonth() == date.getMonth() &amp;&amp; vd.getFullYear() == date.getFullYear()){
<b>this</b>.cells.removeClass(&quot;x-date-selected&quot;);
<b>this</b>.cells.each(<b>function</b>(c){
<b>if</b>(c.dom.firstChild.dateValue == t){
c.addClass(&quot;x-date-selected&quot;);
setTimeout(<b>function</b>(){
try{c.dom.firstChild.focus();}catch(e){}
}, 50);
<b>return</b> false;
}
});
<b>return</b>;
}
}
<b>var</b> days = date.getDaysInMonth();
<b>var</b> firstOfMonth = date.getFirstDateOfMonth();
<b>var</b> startingPos = firstOfMonth.getDay()-<b>this</b>.startDay;
<b>if</b>(startingPos &lt;= <b>this</b>.startDay){
startingPos += 7;
}
<b>var</b> pm = date.add(&quot;mo&quot;, -1);
<b>var</b> prevStart = pm.getDaysInMonth()-startingPos;
<b>var</b> cells = <b>this</b>.cells.elements;
<b>var</b> textEls = <b>this</b>.textNodes;
days += startingPos;
<i>// convert everything to numbers so it's fast</i>
<b>var</b> day = 86400000;
<b>var</b> d = (<b>new</b> Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
<b>var</b> today = <b>new</b> Date().clearTime().getTime();
<b>var</b> sel = date.clearTime().getTime();
<b>var</b> min = <b>this</b>.minDate ? <b>this</b>.minDate.clearTime() : Number.NEGATIVE_INFINITY;
<b>var</b> max = <b>this</b>.maxDate ? <b>this</b>.maxDate.clearTime() : Number.POSITIVE_INFINITY;
<b>var</b> ddMatch = <b>this</b>.disabledDatesRE;
<b>var</b> ddText = <b>this</b>.disabledDatesText;
<b>var</b> ddays = <b>this</b>.disabledDays ? <b>this</b>.disabledDays.join(&quot;&quot;) : false;
<b>var</b> ddaysText = <b>this</b>.disabledDaysText;
<b>var</b> format = <b>this</b>.format;
<b>var</b> setCellClass = <b>function</b>(cal, cell){
cell.title = &quot;&quot;;
<b>var</b> t = d.getTime();
cell.firstChild.dateValue = t;
<b>if</b>(t == today){
cell.className += &quot; x-date-today&quot;;
cell.title = cal.todayText;
}
<b>if</b>(t == sel){
cell.className += &quot; x-date-selected&quot;;
setTimeout(<b>function</b>(){
try{cell.firstChild.focus();}catch(e){}
}, 50);
}
<i>// disabling</i>
<b>if</b>(t &lt; min) {
cell.className = &quot; x-date-disabled&quot;;
cell.title = cal.minText;
<b>return</b>;
}
<b>if</b>(t &gt; max) {
cell.className = &quot; x-date-disabled&quot;;
cell.title = cal.maxText;
<b>return</b>;
}
<b>if</b>(ddays){
<b>if</b>(ddays.indexOf(d.getDay()) != -1){
cell.title = ddaysText;
cell.className = &quot; x-date-disabled&quot;;
}
}
<b>if</b>(ddMatch &amp;&amp; format){
<b>var</b> fvalue = d.dateFormat(format);
<b>if</b>(ddMatch.test(fvalue)){
cell.title = ddText.replace(&quot;%0&quot;, fvalue);
cell.className = &quot; x-date-disabled&quot;;
}
}
};
<b>var</b> i = 0;
<b>for</b>(; i &lt; startingPos; i++) {
textEls[i].innerHTML = (++prevStart);
d.setDate(d.getDate()+1);
cells[i].className = &quot;x-date-prevday&quot;;
setCellClass(<b>this</b>, cells[i]);
}
<b>for</b>(; i &lt; days; i++){
intDay = i - startingPos + 1;
textEls[i].innerHTML = (intDay);
d.setDate(d.getDate()+1);
cells[i].className = &quot;x-date-active&quot;;
setCellClass(<b>this</b>, cells[i]);
}
<b>var</b> extraDays = 0;
<b>for</b>(; i &lt; 42; i++) {
textEls[i].innerHTML = (++extraDays);
d.setDate(d.getDate()+1);
cells[i].className = &quot;x-date-nextday&quot;;
setCellClass(<b>this</b>, cells[i]);
}
<b>this</b>.mbtn.setText(<b>this</b>.monthNames[date.getMonth()] + &quot; &quot; + date.getFullYear());
<b>if</b>(!<b>this</b>.internalRender){
<b>var</b> main = <b>this</b>.el.dom.firstChild;
<b>var</b> w = main.offsetWidth;
<b>this</b>.el.setWidth(w + <b>this</b>.el.getBorderWidth(&quot;lr&quot;));
Ext.fly(main).setWidth(w);
<b>this</b>.internalRender = true;
<i>// opera does not respect the auto grow header center column</i>
<i>// then, after it gets a width opera refuses to recalculate</i>
<i>// without a second pass</i>
<b>if</b>(Ext.isOpera &amp;&amp; !<b>this</b>.secondPass){
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + &quot;px&quot;;
<b>this</b>.secondPass = true;
<b>this</b>.update.defer(10, <b>this</b>, [date]);
}
}
}
});</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