为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 javascript日历控件的使用

javascript日历控件的使用

标签：
JavaScript

/**

  • Calendar
  • @param beginYear 1990
  • @param endYear 2010
  • @param language 0(zh_cn)1(en_us)2(en_en)3(zh_tw)
  • @param patternDelimiter "-"
  • @param date2StringPattern "yyyy-MM-dd"
  • @param string2DatePattern "ymd"
  • @version 1.0 build 2006-04-01
  • @version 1.1 build 2006-12-17
  • @author KimSoft (jinqinghua [at] gmail.com)
  • NOTE! you can use it free, but keep the copyright please

  • IMPORTANT:you must include this script file inner html body elment
    */
    function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) {
    this.beginYear = beginYear 1990;
    this.endYear = endYear 2020;
    this.language = language 0;
    this.patternDelimiter = patternDelimiter "-";
    this.date2StringPattern = date2StringPattern Calendar.language["date2StringPattern"][this.language].replace(/-/g, this.patternDelimiter);
    this.string2DatePattern = string2DatePattern Calendar.language["string2DatePattern"][this.language];

    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":"#00CC33","bg_over":"#EFEFEF","bg_out":"#FFCC00"}
    };

Calendar.language = {
"year" : ["\u5e74", "", "", "\u5e74"],
"months" : [
["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"]
],
"weeks" : [["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"],
["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],
["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],
["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"]
],
"clear" : ["\u6e05\u7a7a", "Clear", "Clear", "\u6e05\u7a7a"],
"today" : ["\u4eca\u5929", "Today", "Today", "\u4eca\u5929"],
"close" : ["\u5173\u95ed", "Close", "Close", "\u95dc\u9589"],
"date2StringPattern" : ["yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd"],
"string2DatePattern" : ["ymd","ymd", "ymd", "ymd"]
};

Calendar.prototype.draw = function() {
calendar = this;

var _cs = [];
_cs[_cs.length] = '<form id="__calendarForm" name="__calendarForm" method="post">';
_cs[_cs.length] = '<table id="__calendarTable" width="100%" border="0" cellpadding="3" cellspacing="1" align="center">';
_cs[_cs.length] = ' <tr>';
_cs[_cs.length] = '  <th><input class="l" name="goPrevMonthButton" type="button" id="goPrevMonthButton" value="&lt;" \/><\/th>';
_cs[_cs.length] = '  <th colspan="5"><select class="year" name="yearSelect" id="yearSelect"><\/select><select class="month" name="monthSelect" id="monthSelect"><\/select><\/th>';
_cs[_cs.length] = '  <th><input class="r" name="goNextMonthButton" type="button" id="goNextMonthButton" value="&gt;" \/><\/th>';
_cs[_cs.length] = ' <\/tr>';
_cs[_cs.length] = ' <tr>';
for(var i = 0; i < 7; i++) {
    _cs[_cs.length] = '<th class="theader">';
    _cs[_cs.length] = Calendar.language["weeks"][this.language][i];
    _cs[_cs.length] = '<\/th>'; 
}
_cs[_cs.length] = '<\/tr>';
for(var i = 0; i < 6; i++){
    _cs[_cs.length] = '<tr align="center">';
    for(var j = 0; j < 7; j++) {
        switch (j) {
            case 0: _cs[_cs.length] = '<td class="sun">&nbsp;<\/td>'; break;
            case 6: _cs[_cs.length] = '<td class="sat">&nbsp;<\/td>'; break;
            default:_cs[_cs.length] = '<td class="normal">&nbsp;<\/td>'; break;
        }
    }
    _cs[_cs.length] = '<\/tr>';
}
_cs[_cs.length] = ' <tr>';
_cs[_cs.length] = '  <th colspan="2"><input type="button" class="b" name="clearButton" id="clearButton" \/><\/th>';
_cs[_cs.length] = '  <th colspan="3"><input type="button" class="b" name="selectTodayButton" id="selectTodayButton" \/><\/th>';
_cs[_cs.length] = '  <th colspan="2"><input type="button" class="b" name="closeButton" id="closeButton" \/><\/th>';
_cs[_cs.length] = ' <\/tr>';
_cs[_cs.length] = '<\/table>';
_cs[_cs.length] = '<\/form>';

this.iframe.document.body.innerHTML = _cs.join("");
this.form = this.iframe.document.forms["__calendarForm"];

this.form.clearButton.value = Calendar.language["clear"][this.language];
this.form.selectTodayButton.value = Calendar.language["today"][this.language];
this.form.closeButton.value = Calendar.language["close"][this.language];

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.dateControl.value = "";calendar.hide();}
this.form.closeButton.onclick = function () {calendar.hide();}
this.form.selectTodayButton.onclick = function () {
    var today = new Date();
    calendar.date = today;
    calendar.year = today.getFullYear();
    calendar.month = today.getMonth();
    calendar.dateControl.value = today.format(calendar.date2StringPattern);
    calendar.hide();
}

};

Calendar.prototype.bindYear = function() {
var ys = this.form.yearSelect;
ys.length = 0;
for (var i = this.beginYear; i <= this.endYear; i++){
ys.options[ys.length] = new Option(i + Calendar.language["year"][this.language], i);
}
};

Calendar.prototype.bindMonth = function() {
var ms = this.form.monthSelect;
ms.length = 0;
for (var i = 0; i < 12; i++){
ms.options[ms.length] = new Option(Calendar.language["months"][this.language][i], i);
}
};

Calendar.prototype.goPrevMonth = function(e){
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(e){
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() {
var ys = this.form.yearSelect;
var ms = this.form.monthSelect;
for (var i= 0; i < ys.length; i++){
if (ys.options[i].value == this.date.getFullYear()){
ys[i].selected = true;
break;
}
}
for (var i= 0; i < ms.length; i++){
if (ms.options[i].value == this.date.getMonth()){
ms[i].selected = true;
break;
}
}
};

Calendar.prototype.update = function (e){
this.year = e.form.yearSelect.options[e.form.yearSelect.selectedIndex].value;
this.month = e.form.monthSelect.options[e.form.monthSelect.selectedIndex].value;
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
};

Calendar.prototype.bindData = function () {
var calendar = this;
var dateArray = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth());
var tds = this.getElementsByTagName("td", this.getElementById("__calendarTable", this.iframe.document));
for(var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = calendar.colors["bg_over"];
tds[i].onclick = null;
tds[i].onmouseover = null;
tds[i].onmouseout = null;
tds[i].innerHTML = dateArray[i] " ";
if (i > dateArray.length - 1) continue;
if (dateArray[i]){
tds[i].onclick = function () {
if (calendar.dateControl){
calendar.dateControl.value = new Date(calendar.date.getFullYear(),
calendar.date.getMonth(),
this.innerHTML).format(calendar.date2StringPattern);
}
calendar.hide();
}
tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
tds[i].onmouseout = function () {this.style.backgroundColor = calendar.colors["bg_over"];}
var today = new Date();
if (today.getFullYear() == calendar.date.getFullYear()) {
if (today.getMonth() == calendar.date.getMonth()) {
if (today.getDate() == dateArray[i]) {
tds[i].style.backgroundColor = calendar.colors["bg_cur_day"];
tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
tds[i].onmouseout = function () {this.style.backgroundColor = calendar.colors["bg_cur_day"];}
}
}
}
}//end if
}//end for
};

Calendar.prototype.getMonthViewDateArray = function (y, m) {
var dateArray = new Array(42);
var dayOfFirstDate = new Date(y, m, 1).getDay();
var dateCountOfMonth = new Date(y, m + 1, 0).getDate();
for (var i = 0; i < dateCountOfMonth; i++) {
dateArray[i + dayOfFirstDate] = i + 1;
}
return dateArray;
};

Calendar.prototype.show = function (dateControl, popuControl) {
if (this.panel.style.visibility == "visible") {
this.panel.style.visibility = "hidden";
}
if (!dateControl){
throw new Error("arguments[0] is necessary!")
}
this.dateControl = dateControl;
popuControl = popuControl dateControl;

this.draw();
this.bindYear();
this.bindMonth();
if (dateControl.value.length > 0){
    this.date  = new Date(dateControl.value.toDate(this.patternDelimiter, this.string2DatePattern));
    this.year  = this.date.getFullYear();
    this.month = this.date.getMonth();
}
this.changeSelect();
this.bindData();
var xy = this.getAbsPoint(popuControl);
this.panel.style.left = xy.x - $(".right").scrollLeft() + "px";
var toppx = xy.y + dateControl.offsetHeight;
// 解决下方超出屏幕边界的问题
if(toppx > (document.body.clientHeight - 216)){
    this.panel.style.top = (xy.y + dateControl.offsetHeight - 216 - 27 - $(".right").scrollTop()) + "px";
} else {
    this.panel.style.top = (xy.y + dateControl.offsetHeight - $(".right").scrollTop()) + "px";
}
this.panel.style.visibility = "visible";

};

Calendar.prototype.hide = function() {
this.panel.style.visibility = "hidden";
document.getElementById("workInputForm").action="/idwhsys/do/workRecord/workInput?exe_dateChange";
document.getElementById("workInputForm").submit();
};

Calendar.prototype.getElementById = function(id, object){
object = object document;
return document.getElementById ? object.getElementById(id) : document.all(id);
};

Calendar.prototype.getElementsByTagName = function(tagName, object){
object = object document;
return document.getElementsByTagName ? object.getElementsByTagName(tagName) : document.all.tags(tagName);
};

Calendar.prototype.getAbsPoint = function (e){
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent){
x += e.offsetLeft;
y += e.offsetTop;
}
return {"x": x, "y": y};
};

/**

  • @param d the delimiter
  • @param p the pattern of your date
  • @author meizz
  • @author kimsoft add w+ pattern
    */
    Date.prototype.format = function(style) {
    var o = {
    "M+" : this.getMonth() + 1, //month
    "d+" : this.getDate(), //day
    "h+" : this.getHours(), //hour
    "m+" : this.getMinutes(), //minute
    "s+" : this.getSeconds(), //second
    "w+" : "\u65e5\u4e00\u4e8c\u4e09\u56db\u4e94\u516d".charAt(this.getDay()), //week
    "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
    "S" : this.getMilliseconds() //millisecond
    }
    if (/(y+)/.test(style)) {
    style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for(var k in o){
    if (new RegExp("("+ k +")").test(style)){
    style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
    }
    }
    return style;
    };

/**

  • @param d the delimiter
  • @param p the pattern of your date
  • @rebuilder kimsoft
  • @version build 2006.12.15
    */
    String.prototype.toDate = function(delimiter, pattern) {
    delimiter = delimiter "-";
    pattern = pattern "ymd";
    var a = this.split(delimiter);
    var y = parseInt(a[pattern.indexOf("y")], 10);
    //remember to change this next century ;)
    if(y.toString().length <= 2) y += 2000;
    if(isNaN(y)) y = new Date().getFullYear();
    var m = parseInt(a[pattern.indexOf("m")], 10) - 1;
    var d = parseInt(a[pattern.indexOf("d")], 10);
    if(isNaN(d)) d = 1;
    return new Date(y, m, d);
    };

document.writeln('<div id="calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;border:1px solid #666666;width:200px;height:216px;">');
document.writeln('<iframe name="calendarIframe" id="calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" style="margin:0px;"><\/iframe>');
var ci = window.frames['calendarIframe'];
ci.document.writeln('<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">');
ci.document.writeln('<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');
ci.document.writeln('<head>');
ci.document.writeln('<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>');
ci.document.writeln('<title>Web Calendar(UTF-8) Written By KimSoft<\/title>');
ci.document.writeln('<style type="text\/css">');
ci.document.writeln('<!--');
ci.document.writeln('body {font-size:12px;margin:0px;text-align:center;}');
ci.document.writeln('form {margin:0px;}');
ci.document.writeln('select {font-size:12px;background-color:#EFEFEF;}');
ci.document.writeln('table {border:0px solid #CCCCCC;background-color:#FFFFFF}');
ci.document.writeln('th {font-size:12px;font-weight:normal;background-color:#FFFFFF;}');
ci.document.writeln('th.theader {font-weight:normal;background-color:#666666;color:#FFFFFF;width:24px;}');
ci.document.writeln('select.year {width:64px;}');
ci.document.writeln('select.month {width:60px;}');
ci.document.writeln('td {font-size:12px;text-align:center;}');
ci.document.writeln('td.sat {color:#0000FF;background-color:#EFEFEF;}');
ci.document.writeln('td.sun {color:#FF0000;background-color:#EFEFEF;}');
ci.document.writeln('td.normal {background-color:#EFEFEF;}');
ci.document.writeln('input.l {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');
ci.document.writeln('input.r {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');
ci.document.writeln('input.b {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:100%;height:20px;}');
ci.document.writeln('-->');
ci.document.writeln('<\/style>');
ci.document.writeln('<\/head>');
ci.document.writeln('<body>');
ci.document.writeln('<\/body>');
ci.document.writeln('<\/html>');
ci.document.close();
document.writeln('<\/div>');
var calendar = new Calendar();

点击查看更多内容
发表于 2016.07.20 14:23， 共 3571 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

大喊hasaki的幼儿源

Web前端工程师
手记
篇
粉丝
0
获赞与收藏
5

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消