js.calendar

var Calendar = function () {

this.beginYear = 2010;

this.endYear = 2020;

this.patternDelimiter = "-";

this.date2StringPattern = "yyyy-MM-dd".replace(/\-/g, this.patternDelimiter);

this.string2DatePattern = "ymd";

this.dateControl = null;

this.panel = this.getElementById("__calendarPanel");

this.iframe = window.frames.__calendarIframe;

this.form = null;

this.date = new Date;

this.year = this.date.getFullYear();

this.month = this.date.getMonth();

this.colors = {

bg_cur_day : "#0C3",

bg_over : "#EFEFEF",

bg_out : "#FC0"

}

}, calendar;

Calendar.prototype.draw = function () {

calendar = this;

var a = [];

a.push('<form id="__calendarForm" name="__calendarForm" method="post"><table id="__calendarTable" width="100%" border="0" cellpadding="3" cellspacing="1" align="center"><tr><th><input class="l" name="goPrevMonthButton" type="button" id="goPrevMonthButton" value="<"/></th><th colspan="5"><select class="year" name="yearSelect" id="yearSelect"></select><select class="month" name="monthSelect" id="monthSelect"></select></th><th><input class="r" name="goNextMonthButton" type="button" id="goNextMonthButton" value=">"/></th></tr><tr>');

for (var b = 0; b < 7; b++)

a.push('<th class="theader">' + (["日", "一", "二", "三", "四", "五", "六"])[b] + "</th>");

a.push("</tr>");

for (var b = 0; b < 6; b++) {

a.push('<tr align="center">');

for (var c = 0; c < 7; c++)

switch (c) {

case 0:

a.push('<td class="sun"> </td>');

break;

case 6:

a.push('<td class="sat"> </td>');

break;

default:

a.push('<td class="normal"> </td>')

}

a.push("</tr>")

}

a.push('<tr><th colspan="2"><input type="button" class="b" name="clearButton" id="clearButton" value="清空"/></th><th colspan="3"><input type="button" class="b" name="selectTodayButton" id="selectTodayButton" value="今天"/></th><th colspan="2"><input type="button" class="b" name="closeButton" id="closeButton" value="关闭"/></th></tr></table></form>');

this.iframe.document.body.innerHTML = a.join("");

this.form = this.iframe.document.forms.__calendarForm;

this.form.goPrevMonthButton.onclick = function () {

calendar.goPrevMonth(this)

};

this.form.goNextMonthButton.onclick = function () {

calendar.goNextMonth(this)

};

this.form.yearSelect.onchange = function () {

calendar.update(this)

};

this.form.monthSelect.onchange = function () {

calendar.update(this)

};

this.form.clearButton.onclick = function () {

calendar.hide();

calendar.dateControl.value = ""

};

this.form.closeButton.onclick = function () {

calendar.hide()

};

this.form.selectTodayButton.onclick = function () {

var a = new Date;

calendar.date = a;

calendar.year = a.getFullYear();

calendar.month = a.getMonth();

calendar.dateControl.value = a.format(calendar.date2StringPattern);

calendar.hide()

}

};

Calendar.prototype.bindYear = function () {

var b = this.form.yearSelect;

b.length = 0;

for (var a = this.beginYear, c = this.endYear; a <= c; a++)

b.options.add(new Option(a + "年", a))

};

Calendar.prototype.bindMonth = function () {

var b = this.form.monthSelect;

b.length = 0;

for (var a = 0; a < 12; a++)

b.options.add(new Option((["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"])[a], a))

};

Calendar.prototype.goPrevMonth = function () {

if (this.year == this.beginYear && this.month == 0)

return;

this.month--;

if (this.month == -1) {

this.year--;

this.month = 11

}

this.date = new Date(this.year, this.month, 1);

this.changeSelect();

this.bindData()

};

Calendar.prototype.goNextMonth = function () {

if (this.year == this.endYear && this.month == 11)

return;

this.month++;

if (this.month == 12) {

this.year++;

this.month = 0

}

this.date = new Date(this.year, this.month, 1);

this.changeSelect();

this.bindData()

};

Calendar.prototype.changeSelect = function () {

for (var c = this.form.yearSelect, b = this.form.monthSelect, a = 0, d = c.length; a < d; a++)

if (c.options[a].value == this.date.getFullYear()) {

c[a].selected = true;

break

}

for (var a = 0, d = b.length; a < d; a++)

if (b.options[a].value == this.date.getMonth()) {

b[a].selected = true;

break

}

};

Calendar.prototype.update = function (a) {

this.year = a.form.yearSelect.options[a.form.yearSelect.selectedIndex].value;

this.month = a.form.monthSelect.options[a.form.monthSelect.selectedIndex].value;

this.date = new Date(this.year, this.month, 1);

this.changeSelect();

this.bindData()

};

Calendar.prototype.bindData = function () {

for (var b = this, d = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth()), c = this.getElementsByTagName("td", this.getElementById("__calendarTable", this.iframe.document)), a = 0, f = c.length; a < f; a++) {

c[a].style.backgroundColor = b.colors.bg_over;

c[a].onclick = null;

c[a].onmouseover = null;

c[a].onmouseout = null;

c[a].innerHTML = d[a] || " ";

if (a > d.length - 1)

continue;

if (d[a]) {

c[a].onclick = function () {

if (b.dateControl)

b.dateControl.value = new Date(b.date.getFullYear(), b.date.getMonth(), this.innerHTML).format(b.date2StringPattern);

b.hide()

};

c[a].onmouseover = function () {

this.style.backgroundColor = b.colors.bg_out

};

c[a].onmouseout = function () {

this.style.backgroundColor = b.colors.bg_over

};

var e = new Date;

if (e.getFullYear() == b.date.getFullYear())

if (e.getMonth() == b.date.getMonth())

if (e.getDate() == d[a]) {

c[a].style.backgroundColor = b.colors.bg_cur_day;

c[a].onmouseover = function () {

this.style.backgroundColor = b.colors.bg_out

};

c[a].onmouseout = function () {

this.style.backgroundColor = b.colors.bg_cur_day

}

}

}

}

};

Calendar.prototype.getMonthViewDateArray = function (c, b) {

for (var d = new Array(42), e = new Date(c, b, 1).getDay(), f = new Date(c, b + 1, 0).getDate(), a = 0; a < f; a++)

d[a + e] = a + 1;

return d

};

Calendar.prototype.show = function (a, b) {

if (this.panel.style.display !== "none")

this.panel.style.display = "none";

if (!a)

return;

this.dateControl = a;

b = b || a;

this.draw();

this.bindYear();

this.bindMonth();

if (a.value.length > 0) {

this.date = new Date(a.value.toDate(this.patternDelimiter, this.string2DatePattern));

this.year = this.date.getFullYear();

this.month = this.date.getMonth()

}

this.changeSelect();

this.bindData();

var c = this.getAbsPoint(b);

this.panel.style.left = c.x + "px";

this.panel.style.top = c.y + a.offsetHeight + "px";

this.panel.style.display = "block"

};

Calendar.prototype.hide = function () {

this.panel.style.display = "none"

};

Calendar.prototype.getElementById = function (b, a) {

a = a || document;

return document.getElementById ? a.getElementById(b) : document.all(b)

};

Calendar.prototype.getElementsByTagName = function (b, a) {

a = a || document;

return document.getElementsByTagName ? a.getElementsByTagName(b) : document.all.tags(b)

};

Calendar.prototype.getAbsPoint = function (a) {

var b = a.offsetLeft,

c = a.offsetTop;

while (a = a.offsetParent) {

b += a.offsetLeft;

c += a.offsetTop

}

return {

x : b,

y : c

}

};

Date.prototype.format = function (a) {

var b = {

"M+" : this.getMonth() + 1,

"d+" : this.getDate(),

"h+" : this.getHours(),

"m+" : this.getMinutes(),

"s+" : this.getSeconds(),

"w+" : "日一二三四五六".charAt(this.getDay()),

"q+" : Math.floor((this.getMonth() + 3) / 3),

S : this.getMilliseconds()

};

if (/(y+)/.test(a))

a = a.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

for (var c in b)

if (new RegExp("(" + c + ")").test(a))

a = a.replace(RegExp.$1, RegExp.$1.length == 1 ? b[c] : ("00" + b[c]).substr(("" + b[c]).length));

return a

};

String.prototype.toDate = function (c, a) {

c = c || "-";

a = a || "ymd";

var d = this.split(c),

b = parseInt(d[a.indexOf("y")], 10);

if (b.toString().length <= 2)

b += 2e3;

if (isNaN(b))

b = (new Date).getFullYear();

var f = parseInt(d[a.indexOf("m")], 10) - 1,

e = parseInt(d[a.indexOf("d")], 10);

if (isNaN(e))

e = 1;

return new Date(b, f, e)

};

domReady(function () {

var b = document.createElement("div");

b.innerHTML = '<div id="__calendarPanel" style="position:absolute;display:none;background-color:#FFFFFF;border:1px solid #666;width:200px;height:216px"><iframe name="__calendarIframe" id="__calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="margin:0px"></iframe></div>';

document.body.appendChild(b.firstChild);

b = null;

var a = window.frames.__calendarIframe.document,

c = '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title></title><style type="text/css">body{font-size:12px;margin:0px;text-align:center}form{margin:0px}select{font-size:12px;background-color:#EFEFEF}table{border:0px solid #CCC;background-color:#FFFFFF}th{font-size:12px;font-weight:normal;background-color:#FFFFFF}th.theader{font-weight:normal;background-color:#666666;color:#FFF;width:24px}select.year{width:64px}select.month{width:60px}td{font-size:12px;text-align:center}td.sat{color:#00F;background-color:#EFEFEF}td.sun{color:#F00;background-color:#EFEFEF}td.normal{background-color:#EFEFEF}input.l{border:1px solid #CCC;background-color:#EFEFEF;width:20px;height:20px}input.r{border:1px solid #CCC;background-color:#EFEFEF;width:20px;height:20px}input.b{border:1px solid #CCC;background-color:#EFEFEF;width:100%;height:20px}</style></head><body></body></html>';

a.designMode = "On";

a.open();

a.write(c);

a.close();

a.designMode = "Off";

calendar = new Calendar

})