JS日历选择控件1
CSSSJS代码
/**//* Author: Mihai Bazon, September 2002
* http://students.infoiasi.ro/~mishoo
*
* Version: 0.9
*
* Feel free to use this script under the terms of the GNU General Public
* License, as long as you do not remove or alter this notice.
*/
// the Calendar object constructor.
Calendar = function (mondayFirst, dateStr, yourHandler, yourCloseHandler) ...{
// member variables
this.activeDateEl = null;
this.activeMonEl = null;
this.activeYearEl = null;
this.currentDateEl = null;
this.disabledHandler = null;
this.timeout = null;
this.yourHandler = yourHandler || null;
this.yourCloseHandler = yourCloseHandler || null;
this.dragging = false;
this.minYear = 1998;
this.maxYear = 2068;
this.dateFormat = "y-mm-dd";
this.isPopup = true;
this.mondayFirst = mondayFirst;
this.dateStr = dateStr;
};
// ** constants
// "static", needed for event handlers.
Calendar._C = null;
Calendar.is_ie = ( (navigator.userAgent.toLowerCase().indexOf("msie") != -1) &&
(navigator.userAgent.toLowerCase().indexOf("opera") == -1) );
Calendar._MD = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
// ** public functions (these can be thought as static, since none of them use
// ** "this" and they can be accessed without using an instance of the object).
Calendar.getAbsolutePos = function(el) ...{
var r = ...{ x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent) ...{
var tmp = Calendar.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};
Calendar._add_evs = function(el) ...{
Calendar.addEvent(el, "mouseover", Calendar.dayMouseOver);
Calendar.addEvent(el, "mousedown", Calendar.dayMouseDown);
Calendar.addEvent(el, "mouseout", Calendar.dayMouseOut);
if (Calendar.is_ie) ...{
Calendar.addEvent(el, "dblclick", Calendar.dayMouseDblClick);
el.setAttribute("unselectable", true);
}
};
Calendar._del_evs = function(el) ...{
Calendar.removeEvent(el, "mouseover", Calendar.dayMouseOver);
Calendar.removeEvent(el, "mousedown", Calendar.dayMouseDown);
Calendar.removeEvent(el, "mouseout", Calendar.dayMouseOut);
if (Calendar.is_ie) ...{
Calendar.removeEvent(el, "dblclick", Calendar.dayMouseDblClick);
}
};
Calendar.isRelated = function (el, evt) ...{
var related = evt.relatedTarget;
if (!related) ...{
var type = evt.type;
if (type == "mouseover") ...{
related = evt.fromElement;
} else if (type == "mouseout") ...{
related = evt.toElement;
}
}
while (related) ...{
if (related == el) ...{
return true;
}
related = related.parentNode;
}
return false;
};
Calendar.getMonthDays = function(year, month) ...{
if (((0 == (year%4)) && ( (0 != (year%100)) || (0 == (year%400)))) && month == 1) ...{
return 29;
} else ...{
return Calendar._MD[month];
}
};
Calendar.removeClass = function(el, className) ...{
if (!(el && el.className)) ...{
return;
}
var classes = el.className.split(" ");
var newClasses = new Array;
for (i = 0; i < classes.length; ++i) ...{
if (classes[i] != className) ...{
newClasses[newClasses.length] = classes[i];
}
}
el.className = newClasses.join(" ");
};
Calendar.addClass = function(el, className) ...{
el.className += " " + className;
};
Calendar.getElement = function(ev) ...{
if (Calendar.is_ie) ...{
return window.event.srcElement;
} else ...{
return ev.currentTarget;
}
};
Calendar.getTargetElement = function(ev) ...{
if (Calendar.is_ie) ...{
return window.event.srcElement;
} else ...{
return ev.target;
}
};
Calendar.stopEvent = function(ev) ...{
if (Calendar.is_ie) ...{
window.event.cancelBubble = true;
window.event.returnValue = false;
} else ...{
ev.preventDefault();
ev.stopPropagation();
}
};
Calendar.addEvent = function(el, evname, func) ...{
if (Calendar.is_ie) ...{
el.attachEvent("on" + evname, func);
} else ...{
el.addEventListener(evname, func, true);
}
};
Calendar.removeEvent = function(el, evname, func) ...{
if (Calendar.is_ie) ...{
el.detachEvent("on" + evname, func);
} else ...{
el.removeEventListener(evname, func, true);
}
};
Calendar.findMonth = function(el) ...{
if (typeof el.month != 'undefined') ...{
return el;
} else if (typeof el.parentNode.month != 'undefined') ...{
return el.parentNode;
}
return null;
};
Calendar.findYear = function(el) ...{
if (typeof el.year != 'undefined') ...{
return el;
} else if (typeof el.parentNode.year != 'undefined') ...{
return el.parentNode;
}
return null;
};
Calendar.tableMouseUp = function(ev) ...{
var cal = Calendar._C;
if (!cal) ...{
return false;
}
if (cal.timeout) ...{
clearTimeout(cal.timeout);
}
var el = cal.activeDateEl;
if (!el) ...{
return false;
}
var target = Calendar.getTargetElement(ev);
Calendar.removeClass(el, "active");
if (target == el || target.parentNode == el) ...{
Calendar.cellClick(el);
}
var mon = Calendar.findMonth(target);
var date = null;
if (mon) ...{
date = new Date(cal.date);
if (mon.month != date.getMonth()) ...{
date.setMonth(mon.month);
cal.setDate(date);
}
} else ...{
var year = Calendar.findYear(target);
if (year) ...{
date = new Date(cal.date);
if (year.year != date.getFullYear()) ...{
date.setFullYear(year.year);
cal.setDate(date);
}
}
}
Calendar.removeEvent(document, "mouseup", Calendar.tableMouseUp);
Calendar.removeEvent(document, "mouseover", Calendar.tableMouseOver);
Calendar.removeEvent(document, "mousemove", Calendar.tableMouseOver);
cal.hideCombos();
Calendar.stopEvent(ev);
Calendar._C = null;
};
Calendar.tableMouseOver = function (ev) ...{
var cal = Calendar._C;
if (!cal) ...{
return;
}
var el = cal.activeDateEl;
var target = Calendar.getTargetElement(ev);
if (target == el || target.parentNode == el) ...{
Calendar.addClass(el, "hilite active");
} else ...{
Calendar.removeClass(el, "active");
Calendar.removeClass(el, "hilite");
}
var mon = Calendar.findMonth(target);
var date = null;
if (mon) ...{
date = new Date(cal.date);
if (mon.month != date.getMonth()) ...{
if (cal.activeMonEl) ...{
Calendar.removeClass(cal.activeMonEl, "hilite");
}
Calendar.addClass(mon, "hilite");
cal.activeMonEl = mon;
}
} else ...{
var year = Calendar.findYear(target);
if (year) ...{
date = new Date(cal.date);
if (year.year != date.getFullYear()) ...{
if (cal.activeYearEl) ...{
Calendar.removeClass(cal.activeYearEl, "hilite");
}
Calendar.addClass(year, "hilite");
cal.activeYearEl = year;
}
}
}
Calendar.stopEvent(ev);
};
Calendar.tableMouseDown = function (ev) ...{
if (Calendar.getTargetElement(ev) == Calendar.getElement(ev)) ...{
Calendar.stopEvent(ev);
}
};
Calendar.showMonthsCombo = function () ...{
var cal = Calendar._C;
if (!cal) ...{
return false;
}
var cal = cal;
var cd = cal.activeDateEl;
var mc = cal.monthsCombo;
if (cal.activeMonEl) ...{
Calendar.removeClass(cal.activeMonEl, "hilite");
}
var mon = cal.monthsCombo.getElementsByTagName("div")[cal.date.getMonth()];
Calendar.addClass(mon, "hilite");
cal.activeMonEl = mon;
mc.style.left = cd.offsetLeft;
mc.style.top = cd.offsetTop + cd.offsetHeight;
mc.style.display = "block";
};
Calendar.showYearsCombo = function (fwd) ...{
var cal = Calendar._C;
if (!cal) ...{
return false;
}
var cal = cal;
var cd = cal.activeDateEl;
var yc = cal.yearsCombo;
if (cal.activeYearEl) ...{
Calendar.removeClass(cal.activeYearEl, "hilite");
}
cal.activeYearEl = null;
var Y = cal.date.getFullYear() + (fwd ? 1 : -1);
var yr = yc.firstChild;
var show = false;
for (var i = 0; i < 12; ++i) ...{
if (Y >= cal.minYear && Y <= cal.maxYear) ...{
yr.firstChild.data = Y;
yr.year = Y;
yr.style.display = "block";
show = true;
} else ...{
yr.style.display = "none";
}
yr = yr.nextSibling;
Y += fwd ? 2 : -2;
}
if (show) ...{
yc.style.left = cd.offsetLeft;
yc.style.top = cd.offsetTop + cd.offsetHeight;
yc.style.display = "block";
}
};
Calendar.calDragIt = function (ev) ...{
var cal = Calendar._C;
if (!cal.dragging) ...{
return false;
}
var posX;
var posY;
if (Calendar.is_ie) ...{
posY = window.event.clientY + document.body.scrollTop;
posX = window.event.clientX + document.body.scrollLeft;
} else ...{
posX = ev.pageX;
posY = ev.pageY;
}
cal.hideShowCovered();
var st = cal.element.style;
st.left = (posX - cal.xOffs) + "px";
st.top = (posY - cal.yOffs) + "px";
Calendar.stopEvent(ev);
};
Calendar.calDragEnd = function (ev) ...{
var cal = Calendar._C;
cal.dragging = false;
Calendar.removeEvent(document, "mousemove", Calendar.calDragIt);
Calendar.removeEvent(document, "mouseover", Calendar.stopEvent);
Calendar.removeEvent(document, "mouseup", Calendar.calDragEnd);
Calendar.tableMouseUp(ev);
cal.hideShowCovered();
};
Calendar.dayMouseDown = function(ev) ...{
var el = Calendar.getElement(ev);
var cal = el.calendar;
cal.activeDateEl = el;
Calendar._C = cal;
if (el.navtype != 300) ...{
Calendar.addClass(el, "hilite active");
Calendar.addEvent(document, "mouseover", Calendar.tableMouseOver);
Calendar.addEvent(document, "mousemove", Calendar.tableMouseOver);
Calendar.addEvent(document, "mouseup", Calendar.tableMouseUp);
} else if (cal.isPopup) ...{
cal.dragStart(ev);
}
Calendar.stopEvent(ev);
if (el.navtype == -1 || el.navtype == 1) ...{
cal.timeout = setTimeout("Calendar.showMonthsCombo()", 250);
} else if (el.navtype == -2 || el.navtype == 2) ...{
cal.timeout = setTimeout((el.navtype > 0) ? "Calendar.showYearsCombo(true)" : "Calendar.showYearsCombo(false)", 250);
} else ...{
cal.timeout = null;
}
};
Calendar.dayMouseDblClick = function(ev) ...{
Calendar.cellClick(Calendar.getElement(ev));
if (Calendar.is_ie) ...{
document.selection.empty();
}
};
Calendar.dayMouseOver = function(ev) ...{
var el = Calendar.getElement(ev);
if (Calendar.isRelated(el, ev) || Calendar._C) ...{
return false;
}
if (el.ttip) ...{
el.calendar.tooltips.firstChild.data = el.ttip;
}
if (el.navtype != 300) ...{
Calendar.addClass(el, "hilite");
}
Calendar.stopEvent(ev);
};
Calendar.dayMouseOut = function(ev) ...{
var el = Calendar.getElement(ev);
if (Calendar.isRelated(el, ev) || Calendar._C) ...{
return false;
}
Calendar.removeClass(el, "hilite");
el.calendar.tooltips.firstChild.data = Calendar._TT["SEL_DATE"];
Calendar.stopEvent(ev);
};
Calendar.datesEqual = function(a, b) ...{
return ((a.getFullYear() == b.getFullYear()) &&
(a.getMonth() == b.getMonth()) &&
(a.getDate() == b.getDate()));
};
Calendar.cellClick = function(el) ...{
var cal = el.calendar;
var closing = false;
var newdate = false;
var date = null;
if (typeof el.navtype == 'undefined') ...{
Calendar.removeClass(cal.currentDateEl, "selected");
Calendar.addClass(el, "selected");
closing = cal.currentDateEl == el;
if (!closing) ...{
cal.currentDateEl = el;
}
date = el.caldate;
cal.date = date;
newdate = true;
} else ...{
if (el.navtype == 200) ...{
Calendar.removeClass(el, "hilite");
cal.callCloseHandler();
return;
}
date = (el.navtype == 0) ? new Date() : new Date(cal.date);
var year = date.getFullYear();
var mon = date.getMonth();
var setMonth = function (mon) ...{
var day = date.getDate();
var max = Calendar.getMonthDays(year, mon);
if (day > max) ...{
date.setDate(max);
}
date.setMonth(mon);
};
switch (el.navtype) ...{
case -2:
if (year > cal.minYear) ...{
date.setFullYear(year - 1);
}
break;
case -1:
if (mon > 0) ...{
setMonth(mon - 1);
} else if (year-- > cal.minYear) ...{
date.setFullYear(year);
setMonth(11);
}
break;
case 1:
if (mon < 11) ...{
setMonth(mon + 1);
} else if (year < cal.maxYear) ...{
date.setFullYear(year + 1);
setMonth(0);
}
break;
case 2:
if (year < cal.maxYear) ...{
date.setFullYear(year + 1);
}
break;
case 100:
cal.setMondayFirst(!cal.mondayFirst);
return;
}
if (!Calendar.datesEqual(date, cal.date)) ...{
cal.setDate(date);
newdate = el.navtype == 0;
}
}
if (newdate) ...{
cal.callHandler();
}
if (closing) ...{
Calendar.removeClass(el, "hilite");
cal.callCloseHandler();
}
};
Calendar.prototype.create = function (_par) ...{
var parent = null;
if (! _par) ...{
// default parent is the document body, in which case we create
// a popup calendar.
parent = document.getElementsByTagName("body")[0];
this.isPopup = true;
} else ...{
parent = _par;
this.isPopup = false;
}
this.date = this.dateStr ? new Date(this.dateStr) : new Date();
var table = document.createElement("table");
this.table = table;
table.cellSpacing = 0;
table.cellPadding = 0;
table.calendar = this;
Calendar.addEvent(table, "mousedown", Calendar.tableMouseDown);
var div = document.createElement("div");
this.element = div;
div.className = "calendar";
if (this.isPopup) ...{
div.style.position = "absolute";
div.style.display = "none";
}
div.appendChild(table);
var thead = document.createElement("thead");
table.appendChild(thead);
var cell = null;
var row = null;
var cal = this;
var hh = function (text, cs, navtype) ...{
cell = document.createElement("td");
row.appendChild(cell);
cell.colSpan = cs;
cell.className = "button";
Calendar._add_evs(cell);
cell.calendar = cal;
cell.navtype = navtype;
if (text.substr(0, 1) != '&') ...{
cell.appendChild(document.createTextNode(text));
}
else ...{
// FIXME: dirty hack for entities
cell.innerHTML = text;
}
return cell;
};
row = document.createElement("tr");
thead.appendChild(row);
row.className = "headrow";
hh("-", 1, 100).ttip = Calendar._TT["TOGGLE"];
this.title = hh("", this.isPopup ? 5 : 6, 300);
this.title.className = "title";
if (this.isPopup) ...{
this.title.ttip = Calendar._TT["DRAG_TO_MOVE"];
this.title.style.cursor = "move";
hh("X", 1, 200).ttip = Calendar._TT["CLOSE"];
}
row = document.createElement("tr");
thead.appendChild(row);
row.className = "headrow";
hh("«", 1, -2).ttip = Calendar._TT["PREV_YEAR"];
hh("‹", 1, -1).ttip = Calendar._TT["PREV_MONTH"];
hh(Calendar._TT["TODAY"], 3, 0).ttip = Calendar._TT["GO_TODAY"];
hh("›", 1, 1).ttip = Calendar._TT["NEXT_MONTH"];
hh("»", 1, 2).ttip = Calendar._TT["NEXT_YEAR"];
// day names
row = document.createElement("tr");
thead.appendChild(row);
row.className = "daynames";
this.daynames = row;
for (var i = 0; i < 7; ++i) ...{
cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(document.createTextNode(""));
if (!i) ...{
cell.navtype = 100;
cell.calendar = this;
Calendar._add_evs(cell);
}
}
this.displayWeekdays();
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for (i = 0; i < 6; ++i) ...{
row = document.createElement("tr");
tbody.appendChild(row);
for (var j = 0; j < 7; ++j) ...{
cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(document.createTextNode(""));
cell.calendar = this;
}
}
var tfoot = document.createElement("tfoot");
table.appendChild(tfoot);
row = document.createElement("tr");
tfoot.appendChild(row);
row.className = "footrow";
cell = hh(Calendar._TT["SEL_DATE"], 7, 300);
cell.className = "ttip";
if (this.isPopup) ...{
cell.ttip = Calendar._TT["DRAG_TO_MOVE"];
cell.style.cursor = "move";
}
this.tooltips = cell;
div = document.createElement("div");
this.monthsCombo = div;
div.className = "combo";
for (i = 0; i < Calendar._MN.length; ++i) ...{
var mn = document.createElement("div");
mn.className = "label";
mn.month = i;
mn.appendChild(document.createTextNode(Calendar._MN[i].substr(0, 3)));
div.appendChild(mn);
}
this.element.appendChild(div);
div = document.createElement("div");
this.yearsCombo = div;
div.className = "combo";
for (i = 0; i < 12; ++i) ...{
var yr = document.createElement("div");
yr.className = "label";
yr.appendChild(document.createTextNode(""));
div.appendChild(yr);
}
this.element.appendChild(div);
this._init(this.mondayFirst, this.date);
parent.appendChild(this.element);
}
Calendar.prototype._init = function (mondayFirst, date) ...{
var today = new Date();
var year = date.getFullYear();
if (year < this.minYear) ...{
year = this.minYear;
} else if (year > this.maxYear) ...{
year = this.maxYear;
}
date.setFullYear(year);
this.mondayFirst = mondayFirst;
this.date = new Date(date);
var month = date.getMonth();
var mday = date.getDate();
var no_days = Calendar.getMonthDays(year, month);
date.setDate(1);
var wday = date.getDay();
var MON = mondayFirst ? 1 : 0;
var SAT = mondayFirst ? 5 : 6;
var SUN = mondayFirst ? 6 : 0;
if (mondayFirst) ...{
wday = (wday > 0) ? (wday - 1) : 6;
}
var iday = 1;
var row = this.table.getElementsByTagName("tbody")[0].firstChild;
for (var i = 0; i < 6; ++i) ...{
var cell = row.firstChild;
if (iday > no_days) ...{
row.className = "emptyrow"; continue;
} else ...{
row.className = "daysrow";
for (var j = 0; j < 7; ++j) ...{
if ((!i && j < wday) || iday > no_days) ...{
cell.className = "emptycell";
} else ...{
cell.firstChild.data = iday;
cell.className = "day";
date.setDate(iday);
if (this.disabledHandler && this.disabledHandler(date)) ...{
Calendar.addClass(cell, "disabled");
Calendar._del_evs(cell);
} else ...{
cell.caldate = new Date(date);
cell.ttip =
Calendar._DN[wday + MON].substr(0, 3) +
", " +
Calendar._MN[month].substr(0, 3) +
" " + iday + ", " + year;
Calendar._add_evs(cell);
if (iday == mday) ...{
Calendar.addClass(cell, "selected");
this.currentDateEl = cell;
}
if (Calendar.datesEqual(date, today)) ...{
Calendar.addClass(cell, "today");
cell.ttip += Calendar._TT["PART_TODAY"];
}
if (wday == SAT || wday == SUN) ...{
Calendar.addClass(cell, "weekend");
}
}
++wday; ++iday;
if (wday == 7) ...{
wday = 0;
}
}
cell = cell.nextSibling;
}
}
row = row.nextSibling;
}
this.title.firstChild.data = Calendar._MN[month] + ", " + year;
};
Calendar.prototype.setDate = function (date) ...{
if (!Calendar.datesEqual(date, this.date)) ...{
this._init(this.mondayFirst, date);
}
};
Calendar.prototype.setMondayFirst = function (mondayFirst) ...{
this._init(mondayFirst, this.date);
this.displayWeekdays();
};
Calendar.prototype.displayWeekdays = function () ...{
var MON = this.mondayFirst ? 0 : 1;
var SUN = this.mondayFirst ? 6 : 0;
var SAT = this.mondayFirst ? 5 : 6;
var cell = this.daynames.firstChild;
for (var i = 0; i < 7; ++i) ...{
cell.className = "day name";
if (!i) ...{
if (this.mondayFirst) ...{
cell.ttip = Calendar._TT["SUN_FIRST"];
} else ...{
cell.ttip = Calendar._TT["MON_FIRST"];
}
}
if (i == SUN || i == SAT) ...{
Calendar.addClass(cell, "weekend");
}
cell.firstChild.data = Calendar._DN[i + 1 - MON].substr(0,2);
cell = cell.nextSibling;
}
};
Calendar.prototype.setDisabledHandler = function (unaryFunction) ...{
this.disabledHandler = unaryFunction;
};
Calendar.prototype.setRange = function (a, z) ...{
this.minYear = a;
this.maxYear = z;
};
Calendar.prototype.callHandler = function () ...{
if (this.yourHandler) ...{
this.yourHandler(this, this.formatDate());
}
};
Calendar.prototype.callCloseHandler = function () ...{
if (this.yourCloseHandler) ...{
this.yourCloseHandler(this);
}
this.hideShowCovered();
};
Calendar.prototype.destroy = function () ...{
var el = this.element.parentNode;
el.removeChild(this.element);
Calendar._C = null;
delete el;
};
Calendar.prototype.reparent = function (new_parent) ...{
var el = this.element;
el.parentNode.removeChild(el);
new_parent.appendChild(el);
};
Calendar.prototype.show = function () ...{
this.element.style.display = "block";
this.hideShowCovered();
};
Calendar.prototype.hide = function () ...{
this.element.style.display = "none";
};
Calendar.prototype.showAt = function (x, y) ...{
var s = this.element.style;
s.left = x + "px";
s.top = y + "px";
this.show();
};
Calendar.prototype.showAtElement = function (el) ...{
var p = Calendar.getAbsolutePos(el);
this.showAt(p.x, p.y + el.offsetHeight);
};
Calendar.prototype.hideCombos = function () ...{
this.monthsCombo.style.display = "none";
this.yearsCombo.style.display = "none";
};
Calendar.prototype.dragStart = function (ev) ...{
if (this.dragging) ...{
return;
}
this.dragging = true;
var posX;
var posY;
if (Calendar.is_ie) ...{
posY = window.event.clientY + document.body.scrollTop;
posX = window.event.clientX + document.body.scrollLeft;
} else ...{
posY = ev.clientY + window.scrollY;
posX = ev.clientX + window.scrollX;
}
var st = this.element.style;
this.xOffs = posX - parseInt(st.left);
this.yOffs = posY - parseInt(st.top);
Calendar.addEvent(document, "mousemove", Calendar.calDragIt);
Calendar.addEvent(document, "mouseover", Calendar.stopEvent);
Calendar.addEvent(document, "mouseup", Calendar.calDragEnd);
};
Calendar.prototype.setDateFormat = function (str) ...{
this.dateFormat = str;
};
Calendar.prototype.formatDate = function () ...{
var str = new String(this.dateFormat);
var m = this.date.getMonth();
var d = this.date.getDate();
var y = this.date.getFullYear();
var w = this.date.getDay();
var s = new Array;
s['d'] = d;
s['dd'] = (d < 10) ? ('0' + d) : d;
s['m'] = 1+m;
s['mm'] = (m < 9) ? ('0' + (1+m)) : (1+m);
s['y'] = y;
s['yy'] = new String(y).substr(2, 2);
s['D'] = Calendar._DN[w].substr(0, 3);
s['DD'] = Calendar._DN[w];
s['M'] = Calendar._MN[m].substr(0, 3);
s['MM'] = Calendar._MN[m];
var re = /(.*)(W|^)(d|dd|m|mm|y|yy|MM|M|DD|D)(W|$)(.*)/;
while (re.exec(str) != null) ...{
str = RegExp.$1 + RegExp.$2 + s[RegExp.$3] + RegExp.$4 + RegExp.$5;
}
return str;
};
Calendar.prototype.parseDate = function (str, fmt) ...{
var y = 0;
var m = -1;
var d = 0;
var a = str.split(/W+/);
if (!fmt) ...{
fmt = this.dateFormat;
}
var b = fmt.split(/W+/);
var i = 0, j = 0;
for (i = 0; i < a.length; ++i) ...{
if (b[i] == 'D' || b[i] == 'DD') ...{
continue;
}
if (b[i] == 'd' || b[i] == 'dd') ...{
d = a[i];
}
if (b[i] == 'm' || b[i] == 'mm') ...{
m = a[i]-1;
}
if (b[i] == 'y') ...{
y = a[i];
}
if (b[i] == 'yy') ...{
y = parseInt(a[i]) + 1900;
}
if (b[i] == 'M' || b[i] == 'MM') ...{
for (j = 0; j < 12; ++j) ...{
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) ...{ m = j; break; }
}
}
}
if (y != 0 && m != -1 && d != 0) ...{
this.setDate(new Date(y, m, d));
return;
}
y = 0; m = -1; d = 0;
for (i = 0; i < a.length; ++i) ...{
if (a[i].search(/[a-zA-Z]+/) != -1) ...{
var t = -1;
for (j = 0; j < 12; ++j) ...{
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) ...{ t = j; break; }
}
if (t != -1) ...{
if (m != -1) ...{
d = m+1;
}
m = t;
}
} else if (parseInt(a[i]) <= 12 && m == -1) ...{
m = a[i]-1;
} else if (parseInt(a[i]) > 31 && y == 0) ...{
y = a[i];
} else if (d == 0) ...{
d = a[i];
}
}
if (y == 0) ...{
var today = new Date();
y = today.getFullYear();
}
if (m != -1 && d != 0) ...{
this.setDate(new Date(y, m, d));
}
};
Calendar.prototype.hideShowCovered = function () ...{
var tags = new Array ('applet', 'iframe', 'select');
var el = this.element;
var p = Calendar.getAbsolutePos(el);
var EX1 = p.x;
var EX2 = el.offsetWidth + EX1;
var EY1 = p.y;
var EY2 = el.offsetHeight + EY1;
for (var k = 0; k < tags.length; k++) ...{
var ar = document.getElementsByTagName(tags[k]);
var cc = null;
for (var i = 0; i < ar.length; i++) ...{
cc = ar[i];
p = Calendar.getAbsolutePos(cc);
var CX1 = p.x;
var CX2 = cc.offsetWidth + CX1;
var CY1 = p.y;
var CY2 = cc.offsetHeight + CY1;
if ((CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) ...{
cc.style.visibility = "visible";
} else ...{
cc.style.visibility = "hidden";
}
}
}
};
//showDate
Calendar._DN = new Array
("周日",
"周一",
"周二",
"周三",
"周四",
"周五",
"周六",
"周日");
Calendar._MN = new Array
("一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月");
Calendar._TT = ...{};
Calendar._TT["TOGGLE"] = "Toggle first day of week";
Calendar._TT["PREV_YEAR"] = "去年 ";
Calendar._TT["PREV_MONTH"] = "上个月 ";
Calendar._TT["GO_TODAY"] = "今天";
Calendar._TT["NEXT_MONTH"] = "下个月 ";
Calendar._TT["NEXT_YEAR"] = "明年 ";
Calendar._TT["SEL_DATE"] = "选择日期";
Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";
Calendar._TT["PART_TODAY"] = " (今天)";
Calendar._TT["MON_FIRST"] = "Display Monday first";
Calendar._TT["SUN_FIRST"] = "Display Sunday first";
Calendar._TT["CLOSE"] = "关闭";
Calendar._TT["TODAY"] = "今天";
var calendar = null; // remember the calendar object so that we reuse it and
// avoid creation other calendars.
// code from http://www.meyerweb.com/ -- change the active stylesheet.
function setActiveStyleSheet(title) ...{
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) ...{
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) ...{
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
document.getElementById("style").innerHTML = title;
return false;
}
// This function gets called when the end-user clicks on some date.
function selected(cal, date) ...{
cal.sel.value = date; // just update the date in the input field.
if (cal.sel.id == "sel1" || cal.sel.id == "sel3" || cal.sel.id == "sel5" || cal.sel.id == "sel7")
// if we add this call we close the calendar on single-click.
// just to exemplify both cases, we are using this only for the 1st
// and the 3rd field, while 2nd and 4th will still require double-click.
cal.callCloseHandler();
}
// And this gets called when the end-user clicks on the _selected_ date,
// or clicks on the "Close" button. It just hides the calendar without
// destroying it.
function closeHandler(cal) ...{
cal.hide(); // hide the calendar
// don't check mousedown on document anymore (used to be able to hide the
// calendar when someone clicks outside it, see the showCalendar function).
Calendar.removeEvent(document, "mousedown", checkCalendar);
}
// This gets called when the user presses a mouse button anywhere in the
// document, if the calendar is shown. If the click was outside the open
// calendar this function closes it.
function checkCalendar(ev) ...{
var el = Calendar.is_ie ? Calendar.getElement(ev) : Calendar.getTargetElement(ev);
for (; el != null; el = el.parentNode)
// FIXME: allow end-user to click some link without closing the
// calendar. Good to see real-time stylesheet change :)
if (el == calendar.element || el.tagName == "A") break;
if (el == null) ...{
// calls closeHandler which should hide the calendar.
calendar.callCloseHandler();
Calendar.stopEvent(ev);
}
}
// This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown" signals on document and hiding the
// calendar if the click was outside.
function showCalendar(id, format) ...{
var el = document.getElementById(id);
if (calendar != null) ...{
// we already have some calendar created
calendar.hide(); // so we hide it first.
} else ...{
// first-time call, create the calendar.
var cal = new Calendar(true, null, selected, closeHandler);
calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
calendar.setDateFormat(format); // set the specified date format
calendar.parseDate(el.value); // try to parse the text in field
calendar.sel = el; // inform it what input field we use
calendar.showAtElement(el); // show the calendar below it
// catch "mousedown" on document
Calendar.addEvent(document, "mousedown", checkCalendar);
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
// If this handler returns true then the "date" given as
// parameter will be disabled. In this example we enable
// only days within a range of 10 days from the current
// date.
// You can use the functions date.getFullYear() -- returns the year
// as 4 digit number, date.getMonth() -- returns the month as 0..11,
// and date.getDate() -- returns the date of the month as 1..31, to
// make heavy calculations here. However, beware that this function
// should be very fast, as it is called for each day in a month when
// the calendar is (re)constructed.
function isDisabled(date) ...{
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
function flatSelected(cal, date) ...{
var el = document.getElementById("preview");
el.innerHTML = date;
}
function showFlatCalendar() ...{
var parent = document.getElementById("display");
// construct a calendar giving only the "selected" handler.
var cal = new Calendar(true, null, flatSelected);
// We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("DD, M d");
// this call must be the last as it might use data initialized above; if
// we specify a parent, as opposite to the "showCalendar" function above,
// then we create a flat calendar -- not popup. Hidden, though, but...
cal.create(parent);
// ... we can show it here.
cal.show();
}
* http://students.infoiasi.ro/~mishoo
*
* Version: 0.9
*
* Feel free to use this script under the terms of the GNU General Public
* License, as long as you do not remove or alter this notice.
*/
// the Calendar object constructor.
Calendar = function (mondayFirst, dateStr, yourHandler, yourCloseHandler) ...{
// member variables
this.activeDateEl = null;
this.activeMonEl = null;
this.activeYearEl = null;
this.currentDateEl = null;
this.disabledHandler = null;
this.timeout = null;
this.yourHandler = yourHandler || null;
this.yourCloseHandler = yourCloseHandler || null;
this.dragging = false;
this.minYear = 1998;
this.maxYear = 2068;
this.dateFormat = "y-mm-dd";
this.isPopup = true;
this.mondayFirst = mondayFirst;
this.dateStr = dateStr;
};
// ** constants
// "static", needed for event handlers.
Calendar._C = null;
Calendar.is_ie = ( (navigator.userAgent.toLowerCase().indexOf("msie") != -1) &&
(navigator.userAgent.toLowerCase().indexOf("opera") == -1) );
Calendar._MD = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
// ** public functions (these can be thought as static, since none of them use
// ** "this" and they can be accessed without using an instance of the object).
Calendar.getAbsolutePos = function(el) ...{
var r = ...{ x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent) ...{
var tmp = Calendar.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};
Calendar._add_evs = function(el) ...{
Calendar.addEvent(el, "mouseover", Calendar.dayMouseOver);
Calendar.addEvent(el, "mousedown", Calendar.dayMouseDown);
Calendar.addEvent(el, "mouseout", Calendar.dayMouseOut);
if (Calendar.is_ie) ...{
Calendar.addEvent(el, "dblclick", Calendar.dayMouseDblClick);
el.setAttribute("unselectable", true);
}
};
Calendar._del_evs = function(el) ...{
Calendar.removeEvent(el, "mouseover", Calendar.dayMouseOver);
Calendar.removeEvent(el, "mousedown", Calendar.dayMouseDown);
Calendar.removeEvent(el, "mouseout", Calendar.dayMouseOut);
if (Calendar.is_ie) ...{
Calendar.removeEvent(el, "dblclick", Calendar.dayMouseDblClick);
}
};
Calendar.isRelated = function (el, evt) ...{
var related = evt.relatedTarget;
if (!related) ...{
var type = evt.type;
if (type == "mouseover") ...{
related = evt.fromElement;
} else if (type == "mouseout") ...{
related = evt.toElement;
}
}
while (related) ...{
if (related == el) ...{
return true;
}
related = related.parentNode;
}
return false;
};
Calendar.getMonthDays = function(year, month) ...{
if (((0 == (year%4)) && ( (0 != (year%100)) || (0 == (year%400)))) && month == 1) ...{
return 29;
} else ...{
return Calendar._MD[month];
}
};
Calendar.removeClass = function(el, className) ...{
if (!(el && el.className)) ...{
return;
}
var classes = el.className.split(" ");
var newClasses = new Array;
for (i = 0; i < classes.length; ++i) ...{
if (classes[i] != className) ...{
newClasses[newClasses.length] = classes[i];
}
}
el.className = newClasses.join(" ");
};
Calendar.addClass = function(el, className) ...{
el.className += " " + className;
};
Calendar.getElement = function(ev) ...{
if (Calendar.is_ie) ...{
return window.event.srcElement;
} else ...{
return ev.currentTarget;
}
};
Calendar.getTargetElement = function(ev) ...{
if (Calendar.is_ie) ...{
return window.event.srcElement;
} else ...{
return ev.target;
}
};
Calendar.stopEvent = function(ev) ...{
if (Calendar.is_ie) ...{
window.event.cancelBubble = true;
window.event.returnValue = false;
} else ...{
ev.preventDefault();
ev.stopPropagation();
}
};
Calendar.addEvent = function(el, evname, func) ...{
if (Calendar.is_ie) ...{
el.attachEvent("on" + evname, func);
} else ...{
el.addEventListener(evname, func, true);
}
};
Calendar.removeEvent = function(el, evname, func) ...{
if (Calendar.is_ie) ...{
el.detachEvent("on" + evname, func);
} else ...{
el.removeEventListener(evname, func, true);
}
};
Calendar.findMonth = function(el) ...{
if (typeof el.month != 'undefined') ...{
return el;
} else if (typeof el.parentNode.month != 'undefined') ...{
return el.parentNode;
}
return null;
};
Calendar.findYear = function(el) ...{
if (typeof el.year != 'undefined') ...{
return el;
} else if (typeof el.parentNode.year != 'undefined') ...{
return el.parentNode;
}
return null;
};
Calendar.tableMouseUp = function(ev) ...{
var cal = Calendar._C;
if (!cal) ...{
return false;
}
if (cal.timeout) ...{
clearTimeout(cal.timeout);
}
var el = cal.activeDateEl;
if (!el) ...{
return false;
}
var target = Calendar.getTargetElement(ev);
Calendar.removeClass(el, "active");
if (target == el || target.parentNode == el) ...{
Calendar.cellClick(el);
}
var mon = Calendar.findMonth(target);
var date = null;
if (mon) ...{
date = new Date(cal.date);
if (mon.month != date.getMonth()) ...{
date.setMonth(mon.month);
cal.setDate(date);
}
} else ...{
var year = Calendar.findYear(target);
if (year) ...{
date = new Date(cal.date);
if (year.year != date.getFullYear()) ...{
date.setFullYear(year.year);
cal.setDate(date);
}
}
}
Calendar.removeEvent(document, "mouseup", Calendar.tableMouseUp);
Calendar.removeEvent(document, "mouseover", Calendar.tableMouseOver);
Calendar.removeEvent(document, "mousemove", Calendar.tableMouseOver);
cal.hideCombos();
Calendar.stopEvent(ev);
Calendar._C = null;
};
Calendar.tableMouseOver = function (ev) ...{
var cal = Calendar._C;
if (!cal) ...{
return;
}
var el = cal.activeDateEl;
var target = Calendar.getTargetElement(ev);
if (target == el || target.parentNode == el) ...{
Calendar.addClass(el, "hilite active");
} else ...{
Calendar.removeClass(el, "active");
Calendar.removeClass(el, "hilite");
}
var mon = Calendar.findMonth(target);
var date = null;
if (mon) ...{
date = new Date(cal.date);
if (mon.month != date.getMonth()) ...{
if (cal.activeMonEl) ...{
Calendar.removeClass(cal.activeMonEl, "hilite");
}
Calendar.addClass(mon, "hilite");
cal.activeMonEl = mon;
}
} else ...{
var year = Calendar.findYear(target);
if (year) ...{
date = new Date(cal.date);
if (year.year != date.getFullYear()) ...{
if (cal.activeYearEl) ...{
Calendar.removeClass(cal.activeYearEl, "hilite");
}
Calendar.addClass(year, "hilite");
cal.activeYearEl = year;
}
}
}
Calendar.stopEvent(ev);
};
Calendar.tableMouseDown = function (ev) ...{
if (Calendar.getTargetElement(ev) == Calendar.getElement(ev)) ...{
Calendar.stopEvent(ev);
}
};
Calendar.showMonthsCombo = function () ...{
var cal = Calendar._C;
if (!cal) ...{
return false;
}
var cal = cal;
var cd = cal.activeDateEl;
var mc = cal.monthsCombo;
if (cal.activeMonEl) ...{
Calendar.removeClass(cal.activeMonEl, "hilite");
}
var mon = cal.monthsCombo.getElementsByTagName("div")[cal.date.getMonth()];
Calendar.addClass(mon, "hilite");
cal.activeMonEl = mon;
mc.style.left = cd.offsetLeft;
mc.style.top = cd.offsetTop + cd.offsetHeight;
mc.style.display = "block";
};
Calendar.showYearsCombo = function (fwd) ...{
var cal = Calendar._C;
if (!cal) ...{
return false;
}
var cal = cal;
var cd = cal.activeDateEl;
var yc = cal.yearsCombo;
if (cal.activeYearEl) ...{
Calendar.removeClass(cal.activeYearEl, "hilite");
}
cal.activeYearEl = null;
var Y = cal.date.getFullYear() + (fwd ? 1 : -1);
var yr = yc.firstChild;
var show = false;
for (var i = 0; i < 12; ++i) ...{
if (Y >= cal.minYear && Y <= cal.maxYear) ...{
yr.firstChild.data = Y;
yr.year = Y;
yr.style.display = "block";
show = true;
} else ...{
yr.style.display = "none";
}
yr = yr.nextSibling;
Y += fwd ? 2 : -2;
}
if (show) ...{
yc.style.left = cd.offsetLeft;
yc.style.top = cd.offsetTop + cd.offsetHeight;
yc.style.display = "block";
}
};
Calendar.calDragIt = function (ev) ...{
var cal = Calendar._C;
if (!cal.dragging) ...{
return false;
}
var posX;
var posY;
if (Calendar.is_ie) ...{
posY = window.event.clientY + document.body.scrollTop;
posX = window.event.clientX + document.body.scrollLeft;
} else ...{
posX = ev.pageX;
posY = ev.pageY;
}
cal.hideShowCovered();
var st = cal.element.style;
st.left = (posX - cal.xOffs) + "px";
st.top = (posY - cal.yOffs) + "px";
Calendar.stopEvent(ev);
};
Calendar.calDragEnd = function (ev) ...{
var cal = Calendar._C;
cal.dragging = false;
Calendar.removeEvent(document, "mousemove", Calendar.calDragIt);
Calendar.removeEvent(document, "mouseover", Calendar.stopEvent);
Calendar.removeEvent(document, "mouseup", Calendar.calDragEnd);
Calendar.tableMouseUp(ev);
cal.hideShowCovered();
};
Calendar.dayMouseDown = function(ev) ...{
var el = Calendar.getElement(ev);
var cal = el.calendar;
cal.activeDateEl = el;
Calendar._C = cal;
if (el.navtype != 300) ...{
Calendar.addClass(el, "hilite active");
Calendar.addEvent(document, "mouseover", Calendar.tableMouseOver);
Calendar.addEvent(document, "mousemove", Calendar.tableMouseOver);
Calendar.addEvent(document, "mouseup", Calendar.tableMouseUp);
} else if (cal.isPopup) ...{
cal.dragStart(ev);
}
Calendar.stopEvent(ev);
if (el.navtype == -1 || el.navtype == 1) ...{
cal.timeout = setTimeout("Calendar.showMonthsCombo()", 250);
} else if (el.navtype == -2 || el.navtype == 2) ...{
cal.timeout = setTimeout((el.navtype > 0) ? "Calendar.showYearsCombo(true)" : "Calendar.showYearsCombo(false)", 250);
} else ...{
cal.timeout = null;
}
};
Calendar.dayMouseDblClick = function(ev) ...{
Calendar.cellClick(Calendar.getElement(ev));
if (Calendar.is_ie) ...{
document.selection.empty();
}
};
Calendar.dayMouseOver = function(ev) ...{
var el = Calendar.getElement(ev);
if (Calendar.isRelated(el, ev) || Calendar._C) ...{
return false;
}
if (el.ttip) ...{
el.calendar.tooltips.firstChild.data = el.ttip;
}
if (el.navtype != 300) ...{
Calendar.addClass(el, "hilite");
}
Calendar.stopEvent(ev);
};
Calendar.dayMouseOut = function(ev) ...{
var el = Calendar.getElement(ev);
if (Calendar.isRelated(el, ev) || Calendar._C) ...{
return false;
}
Calendar.removeClass(el, "hilite");
el.calendar.tooltips.firstChild.data = Calendar._TT["SEL_DATE"];
Calendar.stopEvent(ev);
};
Calendar.datesEqual = function(a, b) ...{
return ((a.getFullYear() == b.getFullYear()) &&
(a.getMonth() == b.getMonth()) &&
(a.getDate() == b.getDate()));
};
Calendar.cellClick = function(el) ...{
var cal = el.calendar;
var closing = false;
var newdate = false;
var date = null;
if (typeof el.navtype == 'undefined') ...{
Calendar.removeClass(cal.currentDateEl, "selected");
Calendar.addClass(el, "selected");
closing = cal.currentDateEl == el;
if (!closing) ...{
cal.currentDateEl = el;
}
date = el.caldate;
cal.date = date;
newdate = true;
} else ...{
if (el.navtype == 200) ...{
Calendar.removeClass(el, "hilite");
cal.callCloseHandler();
return;
}
date = (el.navtype == 0) ? new Date() : new Date(cal.date);
var year = date.getFullYear();
var mon = date.getMonth();
var setMonth = function (mon) ...{
var day = date.getDate();
var max = Calendar.getMonthDays(year, mon);
if (day > max) ...{
date.setDate(max);
}
date.setMonth(mon);
};
switch (el.navtype) ...{
case -2:
if (year > cal.minYear) ...{
date.setFullYear(year - 1);
}
break;
case -1:
if (mon > 0) ...{
setMonth(mon - 1);
} else if (year-- > cal.minYear) ...{
date.setFullYear(year);
setMonth(11);
}
break;
case 1:
if (mon < 11) ...{
setMonth(mon + 1);
} else if (year < cal.maxYear) ...{
date.setFullYear(year + 1);
setMonth(0);
}
break;
case 2:
if (year < cal.maxYear) ...{
date.setFullYear(year + 1);
}
break;
case 100:
cal.setMondayFirst(!cal.mondayFirst);
return;
}
if (!Calendar.datesEqual(date, cal.date)) ...{
cal.setDate(date);
newdate = el.navtype == 0;
}
}
if (newdate) ...{
cal.callHandler();
}
if (closing) ...{
Calendar.removeClass(el, "hilite");
cal.callCloseHandler();
}
};
Calendar.prototype.create = function (_par) ...{
var parent = null;
if (! _par) ...{
// default parent is the document body, in which case we create
// a popup calendar.
parent = document.getElementsByTagName("body")[0];
this.isPopup = true;
} else ...{
parent = _par;
this.isPopup = false;
}
this.date = this.dateStr ? new Date(this.dateStr) : new Date();
var table = document.createElement("table");
this.table = table;
table.cellSpacing = 0;
table.cellPadding = 0;
table.calendar = this;
Calendar.addEvent(table, "mousedown", Calendar.tableMouseDown);
var div = document.createElement("div");
this.element = div;
div.className = "calendar";
if (this.isPopup) ...{
div.style.position = "absolute";
div.style.display = "none";
}
div.appendChild(table);
var thead = document.createElement("thead");
table.appendChild(thead);
var cell = null;
var row = null;
var cal = this;
var hh = function (text, cs, navtype) ...{
cell = document.createElement("td");
row.appendChild(cell);
cell.colSpan = cs;
cell.className = "button";
Calendar._add_evs(cell);
cell.calendar = cal;
cell.navtype = navtype;
if (text.substr(0, 1) != '&') ...{
cell.appendChild(document.createTextNode(text));
}
else ...{
// FIXME: dirty hack for entities
cell.innerHTML = text;
}
return cell;
};
row = document.createElement("tr");
thead.appendChild(row);
row.className = "headrow";
hh("-", 1, 100).ttip = Calendar._TT["TOGGLE"];
this.title = hh("", this.isPopup ? 5 : 6, 300);
this.title.className = "title";
if (this.isPopup) ...{
this.title.ttip = Calendar._TT["DRAG_TO_MOVE"];
this.title.style.cursor = "move";
hh("X", 1, 200).ttip = Calendar._TT["CLOSE"];
}
row = document.createElement("tr");
thead.appendChild(row);
row.className = "headrow";
hh("«", 1, -2).ttip = Calendar._TT["PREV_YEAR"];
hh("‹", 1, -1).ttip = Calendar._TT["PREV_MONTH"];
hh(Calendar._TT["TODAY"], 3, 0).ttip = Calendar._TT["GO_TODAY"];
hh("›", 1, 1).ttip = Calendar._TT["NEXT_MONTH"];
hh("»", 1, 2).ttip = Calendar._TT["NEXT_YEAR"];
// day names
row = document.createElement("tr");
thead.appendChild(row);
row.className = "daynames";
this.daynames = row;
for (var i = 0; i < 7; ++i) ...{
cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(document.createTextNode(""));
if (!i) ...{
cell.navtype = 100;
cell.calendar = this;
Calendar._add_evs(cell);
}
}
this.displayWeekdays();
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for (i = 0; i < 6; ++i) ...{
row = document.createElement("tr");
tbody.appendChild(row);
for (var j = 0; j < 7; ++j) ...{
cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(document.createTextNode(""));
cell.calendar = this;
}
}
var tfoot = document.createElement("tfoot");
table.appendChild(tfoot);
row = document.createElement("tr");
tfoot.appendChild(row);
row.className = "footrow";
cell = hh(Calendar._TT["SEL_DATE"], 7, 300);
cell.className = "ttip";
if (this.isPopup) ...{
cell.ttip = Calendar._TT["DRAG_TO_MOVE"];
cell.style.cursor = "move";
}
this.tooltips = cell;
div = document.createElement("div");
this.monthsCombo = div;
div.className = "combo";
for (i = 0; i < Calendar._MN.length; ++i) ...{
var mn = document.createElement("div");
mn.className = "label";
mn.month = i;
mn.appendChild(document.createTextNode(Calendar._MN[i].substr(0, 3)));
div.appendChild(mn);
}
this.element.appendChild(div);
div = document.createElement("div");
this.yearsCombo = div;
div.className = "combo";
for (i = 0; i < 12; ++i) ...{
var yr = document.createElement("div");
yr.className = "label";
yr.appendChild(document.createTextNode(""));
div.appendChild(yr);
}
this.element.appendChild(div);
this._init(this.mondayFirst, this.date);
parent.appendChild(this.element);
}
Calendar.prototype._init = function (mondayFirst, date) ...{
var today = new Date();
var year = date.getFullYear();
if (year < this.minYear) ...{
year = this.minYear;
} else if (year > this.maxYear) ...{
year = this.maxYear;
}
date.setFullYear(year);
this.mondayFirst = mondayFirst;
this.date = new Date(date);
var month = date.getMonth();
var mday = date.getDate();
var no_days = Calendar.getMonthDays(year, month);
date.setDate(1);
var wday = date.getDay();
var MON = mondayFirst ? 1 : 0;
var SAT = mondayFirst ? 5 : 6;
var SUN = mondayFirst ? 6 : 0;
if (mondayFirst) ...{
wday = (wday > 0) ? (wday - 1) : 6;
}
var iday = 1;
var row = this.table.getElementsByTagName("tbody")[0].firstChild;
for (var i = 0; i < 6; ++i) ...{
var cell = row.firstChild;
if (iday > no_days) ...{
row.className = "emptyrow"; continue;
} else ...{
row.className = "daysrow";
for (var j = 0; j < 7; ++j) ...{
if ((!i && j < wday) || iday > no_days) ...{
cell.className = "emptycell";
} else ...{
cell.firstChild.data = iday;
cell.className = "day";
date.setDate(iday);
if (this.disabledHandler && this.disabledHandler(date)) ...{
Calendar.addClass(cell, "disabled");
Calendar._del_evs(cell);
} else ...{
cell.caldate = new Date(date);
cell.ttip =
Calendar._DN[wday + MON].substr(0, 3) +
", " +
Calendar._MN[month].substr(0, 3) +
" " + iday + ", " + year;
Calendar._add_evs(cell);
if (iday == mday) ...{
Calendar.addClass(cell, "selected");
this.currentDateEl = cell;
}
if (Calendar.datesEqual(date, today)) ...{
Calendar.addClass(cell, "today");
cell.ttip += Calendar._TT["PART_TODAY"];
}
if (wday == SAT || wday == SUN) ...{
Calendar.addClass(cell, "weekend");
}
}
++wday; ++iday;
if (wday == 7) ...{
wday = 0;
}
}
cell = cell.nextSibling;
}
}
row = row.nextSibling;
}
this.title.firstChild.data = Calendar._MN[month] + ", " + year;
};
Calendar.prototype.setDate = function (date) ...{
if (!Calendar.datesEqual(date, this.date)) ...{
this._init(this.mondayFirst, date);
}
};
Calendar.prototype.setMondayFirst = function (mondayFirst) ...{
this._init(mondayFirst, this.date);
this.displayWeekdays();
};
Calendar.prototype.displayWeekdays = function () ...{
var MON = this.mondayFirst ? 0 : 1;
var SUN = this.mondayFirst ? 6 : 0;
var SAT = this.mondayFirst ? 5 : 6;
var cell = this.daynames.firstChild;
for (var i = 0; i < 7; ++i) ...{
cell.className = "day name";
if (!i) ...{
if (this.mondayFirst) ...{
cell.ttip = Calendar._TT["SUN_FIRST"];
} else ...{
cell.ttip = Calendar._TT["MON_FIRST"];
}
}
if (i == SUN || i == SAT) ...{
Calendar.addClass(cell, "weekend");
}
cell.firstChild.data = Calendar._DN[i + 1 - MON].substr(0,2);
cell = cell.nextSibling;
}
};
Calendar.prototype.setDisabledHandler = function (unaryFunction) ...{
this.disabledHandler = unaryFunction;
};
Calendar.prototype.setRange = function (a, z) ...{
this.minYear = a;
this.maxYear = z;
};
Calendar.prototype.callHandler = function () ...{
if (this.yourHandler) ...{
this.yourHandler(this, this.formatDate());
}
};
Calendar.prototype.callCloseHandler = function () ...{
if (this.yourCloseHandler) ...{
this.yourCloseHandler(this);
}
this.hideShowCovered();
};
Calendar.prototype.destroy = function () ...{
var el = this.element.parentNode;
el.removeChild(this.element);
Calendar._C = null;
delete el;
};
Calendar.prototype.reparent = function (new_parent) ...{
var el = this.element;
el.parentNode.removeChild(el);
new_parent.appendChild(el);
};
Calendar.prototype.show = function () ...{
this.element.style.display = "block";
this.hideShowCovered();
};
Calendar.prototype.hide = function () ...{
this.element.style.display = "none";
};
Calendar.prototype.showAt = function (x, y) ...{
var s = this.element.style;
s.left = x + "px";
s.top = y + "px";
this.show();
};
Calendar.prototype.showAtElement = function (el) ...{
var p = Calendar.getAbsolutePos(el);
this.showAt(p.x, p.y + el.offsetHeight);
};
Calendar.prototype.hideCombos = function () ...{
this.monthsCombo.style.display = "none";
this.yearsCombo.style.display = "none";
};
Calendar.prototype.dragStart = function (ev) ...{
if (this.dragging) ...{
return;
}
this.dragging = true;
var posX;
var posY;
if (Calendar.is_ie) ...{
posY = window.event.clientY + document.body.scrollTop;
posX = window.event.clientX + document.body.scrollLeft;
} else ...{
posY = ev.clientY + window.scrollY;
posX = ev.clientX + window.scrollX;
}
var st = this.element.style;
this.xOffs = posX - parseInt(st.left);
this.yOffs = posY - parseInt(st.top);
Calendar.addEvent(document, "mousemove", Calendar.calDragIt);
Calendar.addEvent(document, "mouseover", Calendar.stopEvent);
Calendar.addEvent(document, "mouseup", Calendar.calDragEnd);
};
Calendar.prototype.setDateFormat = function (str) ...{
this.dateFormat = str;
};
Calendar.prototype.formatDate = function () ...{
var str = new String(this.dateFormat);
var m = this.date.getMonth();
var d = this.date.getDate();
var y = this.date.getFullYear();
var w = this.date.getDay();
var s = new Array;
s['d'] = d;
s['dd'] = (d < 10) ? ('0' + d) : d;
s['m'] = 1+m;
s['mm'] = (m < 9) ? ('0' + (1+m)) : (1+m);
s['y'] = y;
s['yy'] = new String(y).substr(2, 2);
s['D'] = Calendar._DN[w].substr(0, 3);
s['DD'] = Calendar._DN[w];
s['M'] = Calendar._MN[m].substr(0, 3);
s['MM'] = Calendar._MN[m];
var re = /(.*)(W|^)(d|dd|m|mm|y|yy|MM|M|DD|D)(W|$)(.*)/;
while (re.exec(str) != null) ...{
str = RegExp.$1 + RegExp.$2 + s[RegExp.$3] + RegExp.$4 + RegExp.$5;
}
return str;
};
Calendar.prototype.parseDate = function (str, fmt) ...{
var y = 0;
var m = -1;
var d = 0;
var a = str.split(/W+/);
if (!fmt) ...{
fmt = this.dateFormat;
}
var b = fmt.split(/W+/);
var i = 0, j = 0;
for (i = 0; i < a.length; ++i) ...{
if (b[i] == 'D' || b[i] == 'DD') ...{
continue;
}
if (b[i] == 'd' || b[i] == 'dd') ...{
d = a[i];
}
if (b[i] == 'm' || b[i] == 'mm') ...{
m = a[i]-1;
}
if (b[i] == 'y') ...{
y = a[i];
}
if (b[i] == 'yy') ...{
y = parseInt(a[i]) + 1900;
}
if (b[i] == 'M' || b[i] == 'MM') ...{
for (j = 0; j < 12; ++j) ...{
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) ...{ m = j; break; }
}
}
}
if (y != 0 && m != -1 && d != 0) ...{
this.setDate(new Date(y, m, d));
return;
}
y = 0; m = -1; d = 0;
for (i = 0; i < a.length; ++i) ...{
if (a[i].search(/[a-zA-Z]+/) != -1) ...{
var t = -1;
for (j = 0; j < 12; ++j) ...{
if (Calendar._MN[j].substr(0, a[i].length).toLowerCase() == a[i].toLowerCase()) ...{ t = j; break; }
}
if (t != -1) ...{
if (m != -1) ...{
d = m+1;
}
m = t;
}
} else if (parseInt(a[i]) <= 12 && m == -1) ...{
m = a[i]-1;
} else if (parseInt(a[i]) > 31 && y == 0) ...{
y = a[i];
} else if (d == 0) ...{
d = a[i];
}
}
if (y == 0) ...{
var today = new Date();
y = today.getFullYear();
}
if (m != -1 && d != 0) ...{
this.setDate(new Date(y, m, d));
}
};
Calendar.prototype.hideShowCovered = function () ...{
var tags = new Array ('applet', 'iframe', 'select');
var el = this.element;
var p = Calendar.getAbsolutePos(el);
var EX1 = p.x;
var EX2 = el.offsetWidth + EX1;
var EY1 = p.y;
var EY2 = el.offsetHeight + EY1;
for (var k = 0; k < tags.length; k++) ...{
var ar = document.getElementsByTagName(tags[k]);
var cc = null;
for (var i = 0; i < ar.length; i++) ...{
cc = ar[i];
p = Calendar.getAbsolutePos(cc);
var CX1 = p.x;
var CX2 = cc.offsetWidth + CX1;
var CY1 = p.y;
var CY2 = cc.offsetHeight + CY1;
if ((CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) ...{
cc.style.visibility = "visible";
} else ...{
cc.style.visibility = "hidden";
}
}
}
};
//showDate
Calendar._DN = new Array
("周日",
"周一",
"周二",
"周三",
"周四",
"周五",
"周六",
"周日");
Calendar._MN = new Array
("一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月");
Calendar._TT = ...{};
Calendar._TT["TOGGLE"] = "Toggle first day of week";
Calendar._TT["PREV_YEAR"] = "去年 ";
Calendar._TT["PREV_MONTH"] = "上个月 ";
Calendar._TT["GO_TODAY"] = "今天";
Calendar._TT["NEXT_MONTH"] = "下个月 ";
Calendar._TT["NEXT_YEAR"] = "明年 ";
Calendar._TT["SEL_DATE"] = "选择日期";
Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";
Calendar._TT["PART_TODAY"] = " (今天)";
Calendar._TT["MON_FIRST"] = "Display Monday first";
Calendar._TT["SUN_FIRST"] = "Display Sunday first";
Calendar._TT["CLOSE"] = "关闭";
Calendar._TT["TODAY"] = "今天";
var calendar = null; // remember the calendar object so that we reuse it and
// avoid creation other calendars.
// code from http://www.meyerweb.com/ -- change the active stylesheet.
function setActiveStyleSheet(title) ...{
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) ...{
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) ...{
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
document.getElementById("style").innerHTML = title;
return false;
}
// This function gets called when the end-user clicks on some date.
function selected(cal, date) ...{
cal.sel.value = date; // just update the date in the input field.
if (cal.sel.id == "sel1" || cal.sel.id == "sel3" || cal.sel.id == "sel5" || cal.sel.id == "sel7")
// if we add this call we close the calendar on single-click.
// just to exemplify both cases, we are using this only for the 1st
// and the 3rd field, while 2nd and 4th will still require double-click.
cal.callCloseHandler();
}
// And this gets called when the end-user clicks on the _selected_ date,
// or clicks on the "Close" button. It just hides the calendar without
// destroying it.
function closeHandler(cal) ...{
cal.hide(); // hide the calendar
// don't check mousedown on document anymore (used to be able to hide the
// calendar when someone clicks outside it, see the showCalendar function).
Calendar.removeEvent(document, "mousedown", checkCalendar);
}
// This gets called when the user presses a mouse button anywhere in the
// document, if the calendar is shown. If the click was outside the open
// calendar this function closes it.
function checkCalendar(ev) ...{
var el = Calendar.is_ie ? Calendar.getElement(ev) : Calendar.getTargetElement(ev);
for (; el != null; el = el.parentNode)
// FIXME: allow end-user to click some link without closing the
// calendar. Good to see real-time stylesheet change :)
if (el == calendar.element || el.tagName == "A") break;
if (el == null) ...{
// calls closeHandler which should hide the calendar.
calendar.callCloseHandler();
Calendar.stopEvent(ev);
}
}
// This function shows the calendar under the element having the given id.
// It takes care of catching "mousedown" signals on document and hiding the
// calendar if the click was outside.
function showCalendar(id, format) ...{
var el = document.getElementById(id);
if (calendar != null) ...{
// we already have some calendar created
calendar.hide(); // so we hide it first.
} else ...{
// first-time call, create the calendar.
var cal = new Calendar(true, null, selected, closeHandler);
calendar = cal; // remember it in the global var
cal.setRange(1900, 2070); // min/max year allowed.
cal.create();
}
calendar.setDateFormat(format); // set the specified date format
calendar.parseDate(el.value); // try to parse the text in field
calendar.sel = el; // inform it what input field we use
calendar.showAtElement(el); // show the calendar below it
// catch "mousedown" on document
Calendar.addEvent(document, "mousedown", checkCalendar);
return false;
}
var MINUTE = 60 * 1000;
var HOUR = 60 * MINUTE;
var DAY = 24 * HOUR;
var WEEK = 7 * DAY;
// If this handler returns true then the "date" given as
// parameter will be disabled. In this example we enable
// only days within a range of 10 days from the current
// date.
// You can use the functions date.getFullYear() -- returns the year
// as 4 digit number, date.getMonth() -- returns the month as 0..11,
// and date.getDate() -- returns the date of the month as 1..31, to
// make heavy calculations here. However, beware that this function
// should be very fast, as it is called for each day in a month when
// the calendar is (re)constructed.
function isDisabled(date) ...{
var today = new Date();
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
function flatSelected(cal, date) ...{
var el = document.getElementById("preview");
el.innerHTML = date;
}
function showFlatCalendar() ...{
var parent = document.getElementById("display");
// construct a calendar giving only the "selected" handler.
var cal = new Calendar(true, null, flatSelected);
// We want some dates to be disabled; see function isDisabled above
cal.setDisabledHandler(isDisabled);
cal.setDateFormat("DD, M d");
// this call must be the last as it might use data initialized above; if
// we specify a parent, as opposite to the "showCalendar" function above,
// then we create a flat calendar -- not popup. Hidden, though, but...
cal.create(parent);
// ... we can show it here.
cal.show();
}
CSS代码
/**//* The main calendar widget. DIV containing a table. */
div.calendar {...}{ position: relative; }
.calendar, .calendar table {...}{
border: 1px solid #889A9E;
font-size: 11px;
color: #000;
cursor: default;
background: #F5F5F5;
font-family: tahoma,verdana,sans-serif;
}
/**//* Header part -- contains navigation buttons and day names. */
.calendar .button {...}{ /**//* "<<", "<", ">", ">>" buttons have this class */
text-align: center; /**//* They are the navigation buttons */
padding: 2px; /**//* Make the buttons seem like they're pressing */
}
.calendar thead .title {...}{ /**//* This holds the current "month, year" */
font-weight: bold; /**//* Pressing it will take you to the current date */
text-align: center;
background: #fff;
color: #000;
padding: 2px;
}
.calendar thead .headrow {...}{ /**//* Row <TR> containing navigation buttons */
background: #7B9CAE;
color: #fff;
}
.calendar thead .daynames {...}{ /**//* Row <TR> containing the day names */
background: #C4D3DB;
}
.calendar thead .name {...}{ /**//* Cells <TD> containing the day names */
border-bottom: 1px solid #889A9E;
padding: 2px;
text-align: center;
color: #000;
}
.calendar thead .weekend {...}{ /**//* How a weekend day name shows in header */
color:#FF6600;
}
.calendar thead .hilite {...}{ /**//* How do the buttons in header appear when hover */
background: #3C5462;
color: #FFF;
border: 1px solid #3C5462;
padding: 1px;
}
.calendar thead .active {...}{ /**//* Active (pressed) buttons in header */
background: #77c;
padding: 2px 0px 0px 2px;
}
/**//* The body part -- contains all the days in month. */
.calendar tbody .day {...}{ /**//* Cells <TD> containing month days dates */
width: 2em;
color: #456;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar tbody .hilite {...}{ /**//* Hovered cells <TD> */
background: #DEE7EB;
padding: 1px 3px 1px 1px;
border: 1px solid #bbb;
}
.calendar tbody .active {...}{ /**//* Active (pressed) cells <TD> */
background: #cde;
padding: 2px 2px 0px 2px;
}
.calendar tbody .selected {...}{ /**//* Cell showing today date */
font-weight: bold;
border: 1px solid #000;
padding: 1px 3px 1px 1px;
background: #fff;
color: #000;
}
.calendar tbody .weekend {...}{ /**//* Cells showing weekend days */
color: #a66;
}
.calendar tbody .today {...}{ /**//* Cell showing selected date */
font-weight: bold;
color: #000;
}
.calendar tbody .disabled {...}{ color: #999; }
.calendar tbody .emptycell {...}{ /**//* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow {...}{ /**//* Empty row (some months need less than 6 rows) */
display: none;
}
/**//* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow {...}{ /**//* The <TR> in footer (only one right now) */
text-align: center;
background: #889A9E;
color: #fff;
}
.calendar tfoot .ttip {...}{ /**//* Tooltip (status bar) cell <TD> */
background: #fff;
color: #445;
border-top: 1px solid #889A9E;
padding: 1px;
}
.calendar tfoot .hilite {...}{ /**//* Hover style for buttons in footer */
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}
.calendar tfoot .active {...}{ /**//* Active (pressed) style for buttons in footer */
background: #77c;
padding: 2px 0px 0px 2px;
}
/**//* Combo boxes (menus that display months/years for direct selection) */
.combo {...}{
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
cursor: default;
border: 1px solid #655;
background: #def;
color: #000;
font-size: smaller;
}
.combo .label {...}{
width: 100%;
text-align: center;
}
.combo .hilite {...}{
background: #acf;
}
div.calendar {...}{ position: relative; }
.calendar, .calendar table {...}{
border: 1px solid #889A9E;
font-size: 11px;
color: #000;
cursor: default;
background: #F5F5F5;
font-family: tahoma,verdana,sans-serif;
}
/**//* Header part -- contains navigation buttons and day names. */
.calendar .button {...}{ /**//* "<<", "<", ">", ">>" buttons have this class */
text-align: center; /**//* They are the navigation buttons */
padding: 2px; /**//* Make the buttons seem like they're pressing */
}
.calendar thead .title {...}{ /**//* This holds the current "month, year" */
font-weight: bold; /**//* Pressing it will take you to the current date */
text-align: center;
background: #fff;
color: #000;
padding: 2px;
}
.calendar thead .headrow {...}{ /**//* Row <TR> containing navigation buttons */
background: #7B9CAE;
color: #fff;
}
.calendar thead .daynames {...}{ /**//* Row <TR> containing the day names */
background: #C4D3DB;
}
.calendar thead .name {...}{ /**//* Cells <TD> containing the day names */
border-bottom: 1px solid #889A9E;
padding: 2px;
text-align: center;
color: #000;
}
.calendar thead .weekend {...}{ /**//* How a weekend day name shows in header */
color:#FF6600;
}
.calendar thead .hilite {...}{ /**//* How do the buttons in header appear when hover */
background: #3C5462;
color: #FFF;
border: 1px solid #3C5462;
padding: 1px;
}
.calendar thead .active {...}{ /**//* Active (pressed) buttons in header */
background: #77c;
padding: 2px 0px 0px 2px;
}
/**//* The body part -- contains all the days in month. */
.calendar tbody .day {...}{ /**//* Cells <TD> containing month days dates */
width: 2em;
color: #456;
text-align: right;
padding: 2px 4px 2px 2px;
}
.calendar tbody .hilite {...}{ /**//* Hovered cells <TD> */
background: #DEE7EB;
padding: 1px 3px 1px 1px;
border: 1px solid #bbb;
}
.calendar tbody .active {...}{ /**//* Active (pressed) cells <TD> */
background: #cde;
padding: 2px 2px 0px 2px;
}
.calendar tbody .selected {...}{ /**//* Cell showing today date */
font-weight: bold;
border: 1px solid #000;
padding: 1px 3px 1px 1px;
background: #fff;
color: #000;
}
.calendar tbody .weekend {...}{ /**//* Cells showing weekend days */
color: #a66;
}
.calendar tbody .today {...}{ /**//* Cell showing selected date */
font-weight: bold;
color: #000;
}
.calendar tbody .disabled {...}{ color: #999; }
.calendar tbody .emptycell {...}{ /**//* Empty cells (the best is to hide them) */
visibility: hidden;
}
.calendar tbody .emptyrow {...}{ /**//* Empty row (some months need less than 6 rows) */
display: none;
}
/**//* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow {...}{ /**//* The <TR> in footer (only one right now) */
text-align: center;
background: #889A9E;
color: #fff;
}
.calendar tfoot .ttip {...}{ /**//* Tooltip (status bar) cell <TD> */
background: #fff;
color: #445;
border-top: 1px solid #889A9E;
padding: 1px;
}
.calendar tfoot .hilite {...}{ /**//* Hover style for buttons in footer */
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}
.calendar tfoot .active {...}{ /**//* Active (pressed) style for buttons in footer */
background: #77c;
padding: 2px 0px 0px 2px;
}
/**//* Combo boxes (menus that display months/years for direct selection) */
.combo {...}{
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
cursor: default;
border: 1px solid #655;
background: #def;
color: #000;
font-size: smaller;
}
.combo .label {...}{
width: 100%;
text-align: center;
}
.combo .hilite {...}{
background: #acf;
}
在html里引用这个JS后，body里面<tr><td> <img src="images/date.gif" align="absbottom" onClick="return showCalendar('DateFrom', 'mm/dd/y');" style="cursor:hand"> And
<input type="text" id="DateTo" name="DateTo">
<img src="images/date.gif" align="absbottom" onClick="return showCalendar('DateTo', 'mm/dd/y');" style="cursor:hand"></td></tr>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhangkunls/archive/2006/10/26/1351875.aspx
浙公网安备 33010602011771号