?? mopcalendar.js
字號(hào):
with(core.web.widgets)
{
MopCalendarWidget = function()
{
Widget.call(this);
var MopCalendarAdorner = core.web.widgets.adorners.MopCalendarAdorner;
var adorner = new MopCalendarAdorner();
this.captureEvents(adorner,"change");
this.captureEvents(adorner,"click");
this.addAdorner(adorner);
}
MopCalendarWidget.prototype = new Widget();
MopCalendarWidget.prototype.onchange = function(evt)
{
}
MopCalendarWidget.prototype.onclick = function(evt)
{
alert(evt.date);
}
with(adorners)
{
MopCalendarAdorner = function()
{
Adorner.call(this);
}
MopCalendarAdorner.prototype = new Adorner();
MopCalendarAdorner.prototype.load = function(face, parent){
var $pointer = this;
var now = Date.now().datePart();
var defaultDate = Date.parseDate(face.getAttribute("date")) || now;
if(parent)
defaultDate = Date.parseDate(parent.getAttribute("date")) || now;
var fromYear = parseInt(face.getAttribute("fromYear")) || 1970;
var toYear = parseInt(face.getAttribute("toYear")) || 2069;
var formatter = face.getAttribute("format") || "YYYY-MM-DD";
var _css = this.resource("calendar.css");
var _css2 = this.resource("button.css");
core.web.CSSStyleSheet.load(_css);
core.web.CSSStyleSheet.load(_css2);
var monthStr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
var _div = $html("div", face.id);
var _visible = face.getAttribute("visibility");
if(_visible == "hidden")
{
_div.hide();
}
_div.el.style.position = "absolute";
var _id = "_panel" + Math.random();
var _bar = "_bar" + Math.random();
var _arrow_right = "_arrow_right" + Math.random();
var _arrow_left = "_arrow_left" + Math.random();
var s = '<TABLE class="panelTable" height="185" cellSpacing="1" cellPadding="0" width="253" align="center" bgColor="#3e75a9" border="0"><TBODY><TR><TD id="'+_bar+'" style="cursor:move"></tD></TR><TR><TD class="panelTD" vAlign="top" bgColor="#d1e1ee"><TABLE cellSpacing="0" cellPadding="0" width="100%" border="0"><TBODY><TR><TD id = "'+_arrow_left+'" width="15" class="arrow_left" height="12"></TD><TD align="middle"><SELECT class="NoBorder" knobName="MopCalendar_selYear" style="width: 72px"></SELECT><SELECT knobName="MopCalendar_selMonth" class="NoBorder" style="width: 60px" ></SELECT></TD><TD id = "'+_arrow_right+'" align="right" class="arrow_right" width="15"></TD></TR></TBODY></TABLE><TABLE style="margin-top: 6px" cellSpacing="1" cellPadding="0" width="100%" bgColor="#a0c6e5" border="0"><TBODY><TR><TD bgColor="#ffffff"><TABLE id = "'+_id+'"; cellSpacing=0 cellPadding=0 width="100%" border="0"><TBODY><TR style="PADDING-TOP: 2px; HEIGHT: 16px"><TD class="weekEnd" align="middle">日</TD><TD class="weekDay" align="middle">一</TD><TD class="weekDay" align="middle">二</TD><TD class="weekDay" align="middle">三</TD><TD class="weekDay" align="middle">四</TD><TD class="weekDay" align="middle">五</TD><TD class="weekEnd" align="middle">六</TD></TR><TR><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD></TR><TR><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD></TR><TR><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD></TR><TR><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD></TR><TR><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD></TR><TR><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD><TD class="dateGridHid" onmouseover="this.style.backgroundColor=\'#FFD760\'" onmouseout="this.style.backgroundColor=\'#FFFFFF\'" align="center"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><TABLE style="MARGIN-TOP: 8px" cellSpacing="0" cellPadding="0" align="right" border="0"><TBODY><TR><TD><BUTTON class="bt_normal" name="_now">當(dāng)前日期</BUTTON></TD><TD width="14"> </TD><TD><BUTTON class="bt_normal" name="_reset">重置</BUTTON></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>';
_div.el.innerHTML = s;
face.parentNode.replaceChild(_div.el, face);
_sels = _div.el.getElementsByTagName("select");
var _yearSel = _sels[0];
var _monthSel = _sels[1];
for(var i = fromYear; i <= toYear; i++)
{
var _op = new Option(i+"年",i);
_yearSel.options.add(_op);
}
for(var i = 0; i <= 11; i++)
{
var _op = new Option(monthStr[i],i);
_monthSel.options.add(_op);
}
function drawCalendarPanel(date)
{
var firstDay = date.getFirstDayOfMonth();
var days = date.getDaysOfMonth();
var datePanel = $(_id);
var _tds = datePanel.getElementsByTagName("td");
for(var i = 0; i < 42; i++)
{
var _vd = firstDay.getDateFrom(i - firstDay.getDay());
var _date = _vd.getDate();
_tds[i + 7].setAttribute("value", _vd.toFormattedDateString("YYYY-MM-DD"));
_tds[i + 7].style.color = "";
_tds[i + 7].className = "dateGrid";
if(_date <= i+1 && i - days + 1 < _date)
{
if(_date == date.getDate())
{
_tds[i + 7].style.color = "blue";
}
if(now.datePart().getTime() == _vd.datePart().getTime())
{
_tds[i + 7].style.color = "#ff0000";
}
}
else
{
_tds[i + 7].className = "dateGridHid";
}
_tds[i + 7].innerText = _date;
}
var _year = date.getFullYear();
var _month = date.getMonth();
_yearSel.value = _year;
_monthSel.value = _month;
return date;
}
this.date = drawCalendarPanel(defaultDate);
var _buttons = _div.el.getElementsByTagName("button");
var behavior = this.addBehavior(new behaviors.HoverBehavior());
if(behavior)
{
behavior.hoverIn = function(evt)
{
evt.target.className = "bt_hover";
}
behavior.hoverOut = function(evt)
{
evt.target.className = "bt_normal";
}
behavior.hoverUp = function(evt)
{
evt.target.className = "bt_up";
}
behavior.hoverDown = function(evt)
{
evt.target.className = "bt_down";
}
behavior.addKnobs($html(_buttons[0]), $html(_buttons[1]));
behavior.active();
}
var behavior = this.addBehavior(new behaviors.ClickBehavior());
behavior.onclick = function(evt)
{
var target = evt.target;
if(target.getAttribute("name") == "_now")
{
$pointer.setDate(drawCalendarPanel(now));
$pointer.dispatchEvent("click", {date:$pointer.date});
}
else if(target.getAttribute("name") == "_reset")
{
$pointer.setDate(drawCalendarPanel(defaultDate));
$pointer.dispatchEvent("click", {date:$pointer.date});
}
else if(target.id == _arrow_left)
{
$pointer.setDate(drawCalendarPanel(
new Date($pointer.date.getFullYear(), $pointer.date.getMonth() - 1, $pointer.date.getDate())
));
}
else if(target.id == _arrow_right)
{
$pointer.setDate(drawCalendarPanel(
new Date($pointer.date.getFullYear(), $pointer.date.getMonth() + 1, $pointer.date.getDate())
));
}
else if(target.getAttribute("value"))
{
$pointer.setDate(Date.parseDate(target.getAttribute("value")));
$pointer.dispatchEvent("click", {date:$pointer.date});
}
}
behavior.addKnobs($html(_buttons[0]), $html(_buttons[1]),$$(_arrow_left),$$(_arrow_right),$$(_id));
behavior.active();
var behavior = this.addBehavior(new behaviors.SelectBehavior());
behavior.onchange = function(evt)
{
var _date = new Date(_yearSel.value, _monthSel.value, $pointer.date.getDate());
$pointer.setDate(drawCalendarPanel(_date));
}
behavior.addKnobs($html(_yearSel), $html(_monthSel));
behavior.active();
var behavior = this.addBehavior(new behaviors.DragBehavior());
behavior.setPanel(_div);
behavior.addKnobs($$(_bar));
behavior.active();
return _div;
}
MopCalendarAdorner.prototype.getDate = function()
{
return this.date;
}
MopCalendarAdorner.prototype.setDate = function(date)
{
if(this.date != date)
{
this.dispatchEvent("change", {date:date});
}
this.date = date;
}
}
}?? 快捷鍵說(shuō)明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -