oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui-ext/docs/overview-summary-DatePicker.js.html
JT Smith 4f68a0933c added YUI and YUI-ext 
fixed the resizable text area with IE problem
fixed the ad space with IE problem
merged the 7.2.0 and 7.1.4 change logs
2006-11-07 23:15:57 +00:00

398 lines
21 KiB
HTML
Raw Blame History

<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
parent.document.title="DatePicker.js Overview";
}
</script>
</head>
<body bgcolor="white" onload="asd();" style="margin:15px;">
<center>
<h2>DatePicker.js</h2>
</center>
<h4>Summary</h4>
<p>
</p>
<table border="1" cellpadding="3" cellspacing="0" width="100%">
<tr bgcolor="#CCCCFF" class="TableHeadingColor">
<td colspan="2" class="title-cell">
<b>Class Summary</b>
</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.DatePicker.html">YAHOO.ext.DatePicker</a></b></td>
<td>&nbsp;</td>
</tr>
</table>
<hr/>
<!-- ========== METHOD SUMMARY =========== -->
<!-- ========== END METHOD SUMMARY =========== -->
<pre class="sourceview">YAHOO.ext.DatePicker = <span class="reserved">function</span>(id, parentElement){
<span class="reserved">this</span>.id = id;
<span class="reserved">this</span>.selectedDate = new Date();
<span class="reserved">this</span>.visibleDate = new Date();
<span class="reserved">this</span>.element = null;
<span class="reserved">this</span>.shadow = null;
<span class="reserved">this</span>.callback = null;
<span class="reserved">this</span>.buildControl(parentElement || document.body);
<span class="reserved">this</span>.mouseDownHandler = YAHOO.ext.EventManager.wrap(<span class="reserved">this</span>.handleMouseDown, <span class="reserved">this</span>, true);
<span class="reserved">this</span>.keyDownHandler = YAHOO.ext.EventManager.wrap(<span class="reserved">this</span>.handleKeyDown, <span class="reserved">this</span>, true);
<span class="reserved">this</span>.wheelHandler = YAHOO.ext.EventManager.wrap(<span class="reserved">this</span>.handleMouseWheel, <span class="reserved">this</span>, true);
};
YAHOO.ext.DatePicker.<span class="reserved">prototype</span> = {
show : <span class="reserved">function</span>(x, y, value, callback){
<span class="reserved">this</span>.hide();
<span class="reserved">this</span>.selectedDate = value;
<span class="reserved">this</span>.visibleDate = value;
<span class="reserved">this</span>.callback = callback;
<span class="reserved">this</span>.refresh();
<span class="reserved">this</span>.element.show();
<span class="reserved">this</span>.element.moveTo(x, y);
<span class="reserved">this</span>.shadow.show();
<span class="reserved">this</span>.shadow.setRegion(<span class="reserved">this</span>.element.getRegion());
<span class="reserved">this</span>.element.dom.tabIndex = 1;
<span class="reserved">this</span>.element.focus();
YAHOO.util.Event.on(document, <span class="literal">"mousedown"</span>, <span class="reserved">this</span>.mouseDownHandler);
YAHOO.util.Event.on(document, <span class="literal">"keydown"</span>, <span class="reserved">this</span>.keyDownHandler);
YAHOO.util.Event.on(document, <span class="literal">"mousewheel"</span>, <span class="reserved">this</span>.wheelHandler);
YAHOO.util.Event.on(document, <span class="literal">"DOMMouseScroll"</span>, <span class="reserved">this</span>.wheelHandler);
},
hide : <span class="reserved">function</span>(){
<span class="reserved">this</span>.shadow.hide();
<span class="reserved">this</span>.element.hide();
YAHOO.util.Event.removeListener(document, <span class="literal">"mousedown"</span>, <span class="reserved">this</span>.mouseDownHandler);
YAHOO.util.Event.removeListener(document, <span class="literal">"keydown"</span>, <span class="reserved">this</span>.keyDownHandler);
YAHOO.util.Event.removeListener(document, <span class="literal">"mousewheel"</span>, <span class="reserved">this</span>.wheelHandler);
YAHOO.util.Event.removeListener(document, <span class="literal">"DOMMouseScroll"</span>, <span class="reserved">this</span>.wheelHandler);
},
setSelectedDate : <span class="reserved">function</span>(date){
<span class="reserved">this</span>.selectedDate = date;
},
getSelectedDate : <span class="reserved">function</span>(){
<span class="reserved">return</span> <span class="reserved">this</span>.selectedDate;
},
showPrevMonth : <span class="reserved">function</span>(){
<span class="reserved">this</span>.visibleDate = <span class="reserved">this</span>.getPrevMonth(<span class="reserved">this</span>.visibleDate);
<span class="reserved">this</span>.refresh();
},
showNextMonth : <span class="reserved">function</span>(){
<span class="reserved">this</span>.visibleDate = <span class="reserved">this</span>.getNextMonth(<span class="reserved">this</span>.visibleDate);
<span class="reserved">this</span>.refresh();
},
showPrevYear : <span class="reserved">function</span>(){
var d = <span class="reserved">this</span>.visibleDate;
<span class="reserved">this</span>.visibleDate = new Date(d.getFullYear()-1, d.getMonth(), d.getDate());
<span class="reserved">this</span>.refresh();
},
showNextYear : <span class="reserved">function</span>(){
var d = <span class="reserved">this</span>.visibleDate;
<span class="reserved">this</span>.visibleDate = new Date(d.getFullYear()+1, d.getMonth(), d.getDate());
<span class="reserved">this</span>.refresh();
},
handleMouseDown : <span class="reserved">function</span>(e){
var target = e.getTarget();
<span class="reserved">if</span>(target != <span class="reserved">this</span>.element.dom &amp;&amp; !YAHOO.util.Dom.isAncestor(<span class="reserved">this</span>.element.dom, target)){
<span class="reserved">this</span>.hide();
}
},
handleKeyDown : <span class="reserved">function</span>(e){
switch(e.browserEvent.keyCode){
case e.LEFT:
<span class="reserved">this</span>.showPrevMonth();
e.stopEvent();
break;
case e.RIGHT:
<span class="reserved">this</span>.showNextMonth();
e.stopEvent();
break;
case e.DOWN:
<span class="reserved">this</span>.showPrevYear();
e.stopEvent();
break;
case e.UP:
<span class="reserved">this</span>.showNextYear();
e.stopEvent();
break;
}
},
handleMouseWheel : <span class="reserved">function</span>(e){
var delta = e.getWheelDelta();
<span class="reserved">if</span>(delta &gt; 0){
<span class="reserved">this</span>.showPrevMonth();
e.stopEvent();
} <span class="reserved">else</span> <span class="reserved">if</span>(delta &lt; 0){
<span class="reserved">this</span>.showNextMonth();
e.stopEvent();
}
},
handleClick : <span class="reserved">function</span>(e){
var d = <span class="reserved">this</span>.visibleDate;
var t = e.getTarget();
<span class="reserved">if</span>(t &amp;&amp; t.className){
switch(t.className){
case <span class="literal">'active'</span>:
<span class="reserved">this</span>.handleSelection(new Date(d.getFullYear(), d.getMonth(), parseInt(t.innerHTML)));
break;
case <span class="literal">'prevday'</span>:
var p = <span class="reserved">this</span>.getPrevMonth(d);
<span class="reserved">this</span>.handleSelection(new Date(p.getFullYear(), p.getMonth(), parseInt(t.innerHTML)));
break;
case <span class="literal">'nextday'</span>:
var n = <span class="reserved">this</span>.getNextMonth(d);
<span class="reserved">this</span>.handleSelection(new Date(n.getFullYear(), n.getMonth(), parseInt(t.innerHTML)));
break;
case <span class="literal">'ypopcal-today'</span>:
<span class="reserved">this</span>.handleSelection(new Date());
break;
case <span class="literal">'next-month'</span>:
<span class="reserved">this</span>.showNextMonth();
break;
case <span class="literal">'prev-month'</span>:
<span class="reserved">this</span>.showPrevMonth();
break;
}
}
e.stopEvent();
},
selectToday : <span class="reserved">function</span>(){
<span class="reserved">this</span>.handleSelection(new Date());
},
handleSelection: <span class="reserved">function</span>(date){
<span class="reserved">this</span>.selectedDate = date;
<span class="reserved">this</span>.callback(date);
<span class="reserved">this</span>.hide();
},
getPrevMonth : <span class="reserved">function</span>(d){
var m = d.getMonth();var y = d.getFullYear();
<span class="reserved">return</span> (m == 0 ? new Date(--y, 11, 1) : new Date(y, --m, 1));
},
getNextMonth : <span class="reserved">function</span>(d){
var m = d.getMonth();var y = d.getFullYear();
<span class="reserved">return</span> (m == 11 ? new Date(++y, 0, 1) : new Date(y, ++m, 1));
},
getDaysInMonth : <span class="reserved">function</span>(m, y){
<span class="reserved">return</span> (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) ? 31 : (m == 4 || m == 6 || m == 9 || m == 11) ? 30 : <span class="reserved">this</span>.isLeapYear(y) ? 29 : 28;
},
isLeapYear : <span class="reserved">function</span>(y){
<span class="reserved">return</span> (((y % 4) == 0) &amp;&amp; ((y % 100) != 0) || ((y % 400) == 0));
},
clearTime : <span class="reserved">function</span>(date){
<span class="reserved">if</span>(date){
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
}
<span class="reserved">return</span> date;
},
refresh : <span class="reserved">function</span>(){
var d = <span class="reserved">this</span>.visibleDate;
<span class="reserved">this</span>.buildInnerCal(d);
<span class="reserved">this</span>.calHead.update(<span class="reserved">this</span>.monthNames[d.getMonth()] + <span class="literal">' '</span> + d.getFullYear());
<span class="reserved">if</span>(<span class="reserved">this</span>.element.isVisible()){
<span class="reserved">this</span>.shadow.setRegion(<span class="reserved">this</span>.element.getRegion());
}
}
};
<span class="comment">/**
* This code is not pretty, but it is fast!
* <span class="attrib">@ignore</span>
*/</span>
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.buildControl = <span class="reserved">function</span>(parentElement){
var c = document.createElement(<span class="literal">'div'</span>);
c.style.position = <span class="literal">'absolute'</span>;
c.style.visibility = <span class="literal">'hidden'</span>;
document.body.appendChild(c);
var html = <span class="literal">'&lt;iframe id="'</span>+<span class="reserved">this</span>.id+<span class="literal">'_shdw" frameborder="0" style="position:absolute; z-index:2000; display:none; top:0px; left:0px;" class="ypopcal-shadow"&gt;&lt;/iframe&gt;'</span> +
<span class="literal">'&lt;div hidefocus="true" class="ypopcal" id="'</span>+<span class="reserved">this</span>.id+<span class="literal">'" style="-moz-outline:none; position:absolute; z-index:2001; display:none; top:0px; left:0px;"&gt;'</span> +
<span class="literal">'&lt;table class="ypopcal-head" border=0 cellpadding=0 cellspacing=0&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class="ypopcal-arrow"&gt;&lt;div class="prev-month"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;&lt;td class="ypopcal-month"&gt;&amp;nbsp;&lt;/td&gt;&lt;td class="ypopcal-arrow"&gt;&lt;div class="next-month"&gt;&amp;nbsp;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;'</span> +
<span class="literal">'&lt;center&gt;&lt;div class="ypopcal-inner"&gt;'</span>;
html += <span class="literal">"&lt;table border=0 cellpadding=2 cellspacing=0 class=\"</span>ypopcal-table\<span class="literal">"&gt;&lt;thead&gt;&lt;tr class=\"</span>ypopcal-daynames\<span class="literal">"&gt;"</span>;
var names = <span class="reserved">this</span>.dayNames;
<span class="reserved">for</span>(var i = 0; i &lt; names.length; i++){
html += <span class="literal">'&lt;td&gt;'</span> + names[i].substr(0, 1) + <span class="literal">'&lt;/td&gt;'</span>;
}
html+= <span class="literal">"&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;"</span>;
<span class="reserved">for</span>(var i = 0; i &lt; 42; i++) {
<span class="reserved">if</span>(i % 7 == 0 &amp;&amp; i != 0){
html += <span class="literal">'&lt;/tr&gt;&lt;tr&gt;'</span>;
}
html += <span class="literal">"&lt;td&gt;&amp;nbsp;&lt;/td&gt;"</span>;
}
html += <span class="literal">"&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;"</span>;
html += <span class="literal">'&lt;/div&gt;&lt;button class="ypopcal-today" style="margin-top:2px;"&gt;'</span>+<span class="reserved">this</span>.todayText+<span class="literal">'&lt;/button&gt;&lt;/center&gt;&lt;/div&gt;'</span>;
c.innerHTML = html;
<span class="reserved">this</span>.shadow = getEl(c.childNodes[0], true);
<span class="reserved">this</span>.shadow.enableDisplayMode();
<span class="reserved">this</span>.element = getEl(c.childNodes[1], true);
<span class="reserved">this</span>.element.enableDisplayMode();
document.body.appendChild(<span class="reserved">this</span>.shadow.dom);
document.body.appendChild(<span class="reserved">this</span>.element.dom);
document.body.removeChild(c);
<span class="reserved">this</span>.element.on(<span class="literal">"selectstart"</span>, <span class="reserved">function</span>(){<span class="reserved">return</span> false;});
var tbody = <span class="reserved">this</span>.element.dom.getElementsByTagName(<span class="literal">'tbody'</span>)[1];
<span class="reserved">this</span>.cells = tbody.getElementsByTagName(<span class="literal">'td'</span>);
<span class="reserved">this</span>.calHead = <span class="reserved">this</span>.element.getChildrenByClassName(<span class="literal">'ypopcal-month'</span>, <span class="literal">'td'</span>)[0];
<span class="reserved">this</span>.element.mon(<span class="literal">'mousedown'</span>, <span class="reserved">this</span>.handleClick, <span class="reserved">this</span>, true);
};
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.buildInnerCal = <span class="reserved">function</span>(dateVal){
var days = <span class="reserved">this</span>.getDaysInMonth(dateVal.getMonth() + 1, dateVal.getFullYear());
var firstOfMonth = new Date(dateVal.getFullYear(), dateVal.getMonth(), 1);
var startingPos = firstOfMonth.getDay();
<span class="reserved">if</span>(startingPos == 0) startingPos = 7;
var pm = <span class="reserved">this</span>.getPrevMonth(dateVal);
var prevStart = <span class="reserved">this</span>.getDaysInMonth(pm.getMonth()+1, pm.getFullYear())-startingPos;
var cells = <span class="reserved">this</span>.cells;
days += startingPos;
<span class="comment">// convert everything to numbers so it's fast</span>
var day = 86400000;
var date = <span class="reserved">this</span>.clearTime(new Date(pm.getFullYear(), pm.getMonth(), prevStart));
var today = <span class="reserved">this</span>.clearTime(new Date()).getTime();
var sel = <span class="reserved">this</span>.selectedDate ? <span class="reserved">this</span>.clearTime(<span class="reserved">this</span>.selectedDate).getTime() : today + 1; <span class="comment">//today +1 will never match anything</span>
var min = <span class="reserved">this</span>.minDate ? <span class="reserved">this</span>.clearTime(<span class="reserved">this</span>.minDate).getTime() : Number.NEGATIVE_INFINITY;
var max = <span class="reserved">this</span>.maxDate ? <span class="reserved">this</span>.clearTime(<span class="reserved">this</span>.maxDate).getTime() : Number.POSITIVE_INFINITY;
var ddMatch = <span class="reserved">this</span>.disabledDatesRE;
var ddText = <span class="reserved">this</span>.disabledDatesText;
var ddays = <span class="reserved">this</span>.disabledDays;
var ddaysText = <span class="reserved">this</span>.disabledDaysText;
var format = <span class="reserved">this</span>.format;
var setCellClass = <span class="reserved">function</span>(cal, cell, d){
cell.title = <span class="literal">''</span>;
var t = d.getTime();
<span class="reserved">if</span>(t == today){
cell.className += <span class="literal">' today'</span>;
cell.title = cal.todayText;
}
<span class="reserved">if</span>(t == sel){
cell.className += <span class="literal">' selected'</span>;
}
<span class="comment">// disabling</span>
<span class="reserved">if</span>(t &lt; min) {
cell.className = <span class="literal">' ypopcal-disabled'</span>;
cell.title = cal.minText;
<span class="reserved">return</span>;
}
<span class="reserved">if</span>(t &gt; max) {
cell.className = <span class="literal">' ypopcal-disabled'</span>;
cell.title = cal.maxText;
<span class="reserved">return</span>;
}
<span class="reserved">if</span>(ddays){
var day = d.getDay();
<span class="reserved">for</span>(var i = 0; i &lt; ddays.length; i++) {
<span class="reserved">if</span>(day === ddays[i]){
cell.title = ddaysText;
cell.className = <span class="literal">' ypopcal-disabled'</span>;
<span class="reserved">return</span>;
}
}
}
<span class="reserved">if</span>(ddMatch &amp;&amp; format){
var fvalue = d.format(format);
<span class="reserved">if</span>(ddMatch.test(fvalue)){
cell.title = ddText.replace(<span class="literal">'%0'</span>, fvalue);
cell.className = <span class="literal">' ypopcal-disabled'</span>;
<span class="reserved">return</span>;
}
}
};
var i = 0;
<span class="reserved">for</span>(; i &lt; startingPos; i++) {
cells[i].innerHTML = (++prevStart);
date.setDate(date.getDate()+1);
cells[i].className = <span class="literal">'prevday'</span>;
setCellClass(<span class="reserved">this</span>, cells[i], date);
}
<span class="reserved">for</span>(; i &lt; days; i++){
intDay = i - startingPos + 1;
cells[i].innerHTML = (intDay);
date.setDate(date.getDate()+1);
cells[i].className = <span class="literal">'active'</span>;
setCellClass(<span class="reserved">this</span>, cells[i], date);
}
var extraDays = 0;
<span class="reserved">for</span>(; i &lt; 42; i++) {
cells[i].innerHTML = (++extraDays);
date.setDate(date.getDate()+1);
cells[i].className = <span class="literal">'nextday'</span>;
setCellClass(<span class="reserved">this</span>, cells[i], date);
}
};
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.todayText = <span class="literal">"Today"</span>;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.minDate = null;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.maxDate = null;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.minText = <span class="literal">"This date is before the minimum date"</span>;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.maxText = <span class="literal">"This date is after the maximum date"</span>;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.format = <span class="literal">'m/d/y'</span>;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.disabledDays = null;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.disabledDaysText = <span class="literal">''</span>;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.disabledDatesRE = null;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.disabledDatesText = <span class="literal">''</span>;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.monthNames = Date.monthNames;
YAHOO.ext.DatePicker.<span class="reserved">prototype</span>.dayNames = Date.dayNames;</pre>
<hr>
<hr>
<font size="-1">
</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Sat Oct 14 06:07:10 2006</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink