Code666 (代码贴、代码片段)

[JavaScript] 一个非常好用的日历控件 calendar.js代码 →→→→→进入此内容的聊天室

来自 , 2020-11-02, 写在 JavaScript, 查看 109 次.
URL http://www.code666.cn/view/5c7a3b81
  1. <!--
  2. /**
  3.  * Calendar
  4.  * @param   beginYear           1990
  5.  * @param   endYear             2010
  6.  * @param   language            0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)|JIP
  7.  * @param   patternDelimiter    "-"
  8.  * @param   date2StringPattern  "yyyy-MM-dd"
  9.  * @param   string2DatePattern  "ymd"
  10.  * @version 1.1 build 2011-12-17
  11.  * @author  huangxian
  12.  */
  13. function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) {
  14.     this.beginYear = beginYear || 1990;
  15.     this.endYear   = endYear   || 2020;
  16.     this.language  = language  || 0;
  17.     this.patternDelimiter = patternDelimiter     || "-";
  18.     this.date2StringPattern = date2StringPattern || Calendar.language["date2StringPattern"][this.language].replace(/-/g, this.patternDelimiter);
  19.     this.string2DatePattern = string2DatePattern || Calendar.language["string2DatePattern"][this.language];
  20.      
  21.     this.dateControl = null;
  22.     this.panel  = this.getElementById("__calendarPanel");
  23.     this.iframe = window.frames["__calendarIframe"];
  24.     this.form   = null;
  25.      
  26.     this.date = new Date();
  27.     this.year = this.date.getFullYear();
  28.     this.month = this.date.getMonth();
  29.      
  30.     this.colors = {"bg_cur_day":"#00CC33","bg_over":"#EFEFEF","bg_out":"#FFCC00"}
  31. };
  32.  
  33. Calendar.language = {
  34.     "year"   : ["u5e74", "", "", "u5e74"],
  35.     "months" : [
  36.                 ["u4e00u6708","u4e8cu6708","u4e09u6708","u56dbu6708","u4e94u6708","u516du6708","u4e03u6708","u516bu6708","u4e5du6708","u5341u6708","u5341u4e00u6708","u5341u4e8cu6708"],
  37.                 ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
  38.                 ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
  39.                 ["u4e00u6708","u4e8cu6708","u4e09u6708","u56dbu6708","u4e94u6708","u516du6708","u4e03u6708","u516bu6708","u4e5du6708","u5341u6708","u5341u4e00u6708","u5341u4e8cu6708"]
  40.                 ],
  41.     "weeks"  : [["u65e5","u6708","u706b","u6c34","u571f","u91d1","u6728"],
  42.                 ["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],
  43.                 ["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],
  44.                 ["u65e5","u4e00","u4e8c","u4e09","u56db","u4e94","u516d"]
  45.         ],
  46.     "clear"  : ["u6e05u7a7a", "Clear", "Clear", "u6e05u7a7a"],
  47.     "today"  : ["u4ecau5929", "Today", "Today", "u4ecau5929"],
  48.     "close"  : ["u5173u95ed", "Close", "Close", "u95dcu9589"],
  49.     "date2StringPattern" : ["yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd"],
  50.     "string2DatePattern" : ["ymd","ymd", "ymd", "ymd"]
  51. };
  52.  
  53. Calendar.prototype.draw = function() {
  54.     calendar = this;
  55.      
  56.     var _cs = [];
  57.     _cs[_cs.length] = '<form id="__calendarForm" name="__calendarForm" method="post">';
  58.     _cs[_cs.length] = '<table id="__calendarTable" width="100%" border="0" cellpadding="3" cellspacing="1" align="center">';
  59.     _cs[_cs.length] = ' <tr>';
  60.     _cs[_cs.length] = '  <th><input class="l" name="goPrevMonthButton" type="button" id="goPrevMonthButton" value="<" /></th>';
  61.     _cs[_cs.length] = '  <th colspan="5"><select class="year" name="yearSelect" id="yearSelect"></select><select class="month" name="monthSelect" id="monthSelect"></select></th>';
  62.     _cs[_cs.length] = '  <th><input class="r" name="goNextMonthButton" type="button" id="goNextMonthButton" value=">" /></th>';
  63.     _cs[_cs.length] = ' </tr>';
  64.     _cs[_cs.length] = ' <tr>';
  65.     for(var i = 0; i < 7; i++) {
  66.         _cs[_cs.length] = '<th class="theader">';
  67.         _cs[_cs.length] = Calendar.language["weeks"][this.language][i];
  68.         _cs[_cs.length] = '</th>';    
  69.     }
  70.     _cs[_cs.length] = '</tr>';
  71.     for(var i = 0; i < 6; i++){
  72.         _cs[_cs.length] = '<tr align="center">';
  73.         for(var j = 0; j < 7; j++) {
  74.             switch (j) {
  75.                 case 0: _cs[_cs.length] = '<td class="sun">&nbsp;</td>'; break;
  76.                 case 6: _cs[_cs.length] = '<td class="sat">&nbsp;</td>'; break;
  77.                 default:_cs[_cs.length] = '<td class="normal">&nbsp;</td>'; break;
  78.             }
  79.         }
  80.         _cs[_cs.length] = '</tr>';
  81.     }
  82.     _cs[_cs.length] = ' <tr>';
  83.     _cs[_cs.length] = '  <th colspan="2"><input type="button" class="b" name="clearButton" id="clearButton" /></th>';
  84.     _cs[_cs.length] = '  <th colspan="3"><input type="button" class="b" name="selectTodayButton" id="selectTodayButton" /></th>';
  85.     _cs[_cs.length] = '  <th colspan="2"><input type="button" class="b" name="closeButton" id="closeButton" /></th>';
  86.     _cs[_cs.length] = ' </tr>';
  87.     _cs[_cs.length] = '</table>';
  88.     _cs[_cs.length] = '</form>';
  89.      
  90.     this.iframe.document.body.innerHTML = _cs.join("");
  91.     this.form = this.iframe.document.forms["__calendarForm"];
  92.  
  93.     this.form.clearButton.value = Calendar.language["clear"][this.language];
  94.     this.form.selectTodayButton.value = Calendar.language["today"][this.language];
  95.     this.form.closeButton.value = Calendar.language["close"][this.language];
  96.      
  97.     this.form.goPrevMonthButton.onclick = function () {calendar.goPrevMonth(this);}
  98.     this.form.goNextMonthButton.onclick = function () {calendar.goNextMonth(this);}
  99.     this.form.yearSelect.onchange = function () {calendar.update(this);}
  100.     this.form.monthSelect.onchange = function () {calendar.update(this);}
  101.      
  102.     this.form.clearButton.onclick = function () {calendar.dateControl.value = "";calendar.hide();}
  103.     this.form.closeButton.onclick = function () {calendar.hide();}
  104.     this.form.selectTodayButton.onclick = function () {
  105.         var today = new Date();
  106.         calendar.date = today;
  107.         calendar.year = today.getFullYear();
  108.         calendar.month = today.getMonth();
  109.         calendar.dateControl.value = today.format(calendar.date2StringPattern);
  110.         calendar.hide();
  111.     }
  112. };
  113.  
  114. Calendar.prototype.bindYear = function() {
  115.     var ys = this.form.yearSelect;
  116.     ys.length = 0;
  117.     for (var i = this.beginYear; i <= this.endYear; i++){
  118.         ys.options[ys.length] = new Option(i + Calendar.language["year"][this.language], i);
  119.     }
  120. };
  121.  
  122. Calendar.prototype.bindMonth = function() {
  123.     var ms = this.form.monthSelect;
  124.     ms.length = 0;
  125.     for (var i = 0; i < 12; i++){
  126.         ms.options[ms.length] = new Option(Calendar.language["months"][this.language][i], i);
  127.     }
  128. };
  129.  
  130. Calendar.prototype.goPrevMonth = function(e){
  131.     if (this.year == this.beginYear && this.month == 0){return;}
  132.     this.month--;
  133.     if (this.month == -1) {
  134.         this.year--;
  135.         this.month = 11;
  136.     }
  137.     this.date = new Date(this.year, this.month, 1);
  138.     this.changeSelect();
  139.     this.bindData();
  140. };
  141.  
  142. Calendar.prototype.goNextMonth = function(e){
  143.     if (this.year == this.endYear && this.month == 11){return;}
  144.     this.month++;
  145.     if (this.month == 12) {
  146.         this.year++;
  147.         this.month = 0;
  148.     }
  149.     this.date = new Date(this.year, this.month, 1);
  150.     this.changeSelect();
  151.     this.bindData();
  152. };
  153.  
  154. Calendar.prototype.changeSelect = function() {
  155.     var ys = this.form.yearSelect;
  156.     var ms = this.form.monthSelect;
  157.     for (var i= 0; i < ys.length; i++){
  158.         if (ys.options[i].value == this.date.getFullYear()){
  159.             ys[i].selected = true;
  160.             break;
  161.         }
  162.     }
  163.     for (var i= 0; i < ms.length; i++){
  164.         if (ms.options[i].value == this.date.getMonth()){
  165.             ms[i].selected = true;
  166.             break;
  167.         }
  168.     }
  169. };
  170.  
  171. Calendar.prototype.update = function (e){
  172.     this.year  = e.form.yearSelect.options[e.form.yearSelect.selectedIndex].value;
  173.     this.month = e.form.monthSelect.options[e.form.monthSelect.selectedIndex].value;
  174.     this.date = new Date(this.year, this.month, 1);
  175.     this.changeSelect();
  176.     this.bindData();
  177. };
  178.  
  179. Calendar.prototype.bindData = function () {
  180.     var calendar = this;
  181.     var dateArray = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth());
  182.     var tds = this.getElementsByTagName("td", this.getElementById("__calendarTable", this.iframe.document));
  183.     for(var i = 0; i < tds.length; i++) {
  184.         tds[i].style.backgroundColor = calendar.colors["bg_over"];
  185.         tds[i].onclick = null;
  186.         tds[i].onmouseover = null;
  187.         tds[i].onmouseout = null;
  188.         tds[i].innerHTML = dateArray[i] || "&nbsp;";
  189.         if (i > dateArray.length - 1) continue;
  190.         if (dateArray[i]){
  191.             tds[i].onclick = function () {
  192.                 if (calendar.dateControl){
  193.                     calendar.dateControl.value = new Date(calendar.date.getFullYear(),
  194.                                                         calendar.date.getMonth(),
  195.                                                         this.innerHTML).format(calendar.date2StringPattern);
  196.                 }
  197.                 calendar.hide();
  198.             }
  199.             tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
  200.             tds[i].onmouseout  = function () {this.style.backgroundColor = calendar.colors["bg_over"];}
  201.             var today = new Date();
  202.             if (today.getFullYear() == calendar.date.getFullYear()) {
  203.                 if (today.getMonth() == calendar.date.getMonth()) {
  204.                     if (today.getDate() == dateArray[i]) {
  205.                         tds[i].style.backgroundColor = calendar.colors["bg_cur_day"];
  206.                         tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}
  207.                         tds[i].onmouseout  = function () {this.style.backgroundColor = calendar.colors["bg_cur_day"];}
  208.                     }
  209.                 }
  210.             }
  211.         }//end if
  212.     }//end for
  213. };
  214.  
  215. Calendar.prototype.getMonthViewDateArray = function (y, m) {
  216.     var dateArray = new Array(42);
  217.     var dayOfFirstDate = new Date(y, m, 1).getDay();
  218.     var dateCountOfMonth = new Date(y, m + 1, 0).getDate();
  219.     for (var i = 0; i < dateCountOfMonth; i++) {
  220.         dateArray[i + dayOfFirstDate] = i + 1;
  221.     }
  222.     return dateArray;
  223. };
  224.  
  225. Calendar.prototype.show = function (dateControl, popuControl) {
  226.     if (this.panel.style.visibility == "visible") {
  227.         this.panel.style.visibility = "hidden";
  228.     }
  229.     if (!dateControl){
  230.         throw new Error("arguments[0] is necessary!")
  231.     }
  232.     this.dateControl = dateControl;
  233.     popuControl = popuControl || dateControl;
  234.  
  235.     this.draw();
  236.     this.bindYear();
  237.     this.bindMonth();
  238.     if (dateControl.value.length > 0){
  239.         this.date  = new Date(dateControl.value.toDate(this.patternDelimiter, this.string2DatePattern));
  240.         this.year  = this.date.getFullYear();
  241.         this.month = this.date.getMonth();
  242.     }
  243.     this.changeSelect();
  244.     this.bindData();
  245.  
  246.     var xy = this.getAbsPoint(popuControl);
  247.     this.panel.style.left = xy.x + "px";
  248.     this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px";
  249.     this.panel.style.visibility = "visible";
  250. };
  251.  
  252. Calendar.prototype.hide = function() {
  253.     this.panel.style.visibility = "hidden";
  254. };
  255.  
  256. Calendar.prototype.getElementById = function(id, object){
  257.     object = object || document;
  258.     return document.getElementById ? object.getElementById(id) : document.all(id);
  259. };
  260.  
  261. Calendar.prototype.getElementsByTagName = function(tagName, object){
  262.     object = object || document;
  263.     return document.getElementsByTagName ? object.getElementsByTagName(tagName) : document.all.tags(tagName);
  264. };
  265.  
  266. Calendar.prototype.getAbsPoint = function (e){
  267.     var x = e.offsetLeft;
  268.     var y = e.offsetTop;
  269.     while(e = e.offsetParent){
  270.         x += e.offsetLeft;
  271.         y += e.offsetTop;
  272.     }
  273.     return {"x": x, "y": y};
  274. };
  275.  
  276. /**
  277.  * @param   d the delimiter
  278.  * @param   p the pattern of your date
  279.  * @author  huangxian
  280.  */
  281. Date.prototype.format = function(style) {
  282.     var o = {
  283.         "M+" : this.getMonth() + 1, //month
  284.         "d+" : this.getDate(),      //day
  285.         "h+" : this.getHours(),     //hour
  286.         "m+" : this.getMinutes(),   //minute
  287.         "s+" : this.getSeconds(),   //second
  288.         "w+" : "u65e5u4e00u4e8cu4e09u56dbu4e94u516d".charAt(this.getDay()),   //week
  289.         "q+" : Math.floor((this.getMonth() + 3) / 3),  //quarter
  290.         "S"  : this.getMilliseconds() //millisecond
  291.     }
  292.     if (/(y+)/.test(style)) {
  293.         style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  294.     }
  295.     for(var k in o){
  296.         if (new RegExp("("+ k +")").test(style)){
  297.             style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
  298.         }
  299.     }
  300.     return style;
  301. };
  302.  
  303. /**
  304.  * @param d the delimiter
  305.  * @param p the pattern of your date
  306.  * @rebuilder huangxian
  307.  * @version 2011
  308.  */
  309. String.prototype.toDate = function(delimiter, pattern) {
  310.     delimiter = delimiter || "-";
  311.     pattern = pattern || "ymd";
  312.     var a = this.split(delimiter);
  313.     var y = parseInt(a[pattern.indexOf("y")], 10);
  314.     //remember to change this next century ;)
  315.     if(y.toString().length <= 2) y += 2000;
  316.     if(isNaN(y)) y = new Date().getFullYear();
  317.     var m = parseInt(a[pattern.indexOf("m")], 10) - 1;
  318.     var d = parseInt(a[pattern.indexOf("d")], 10);
  319.     if(isNaN(d)) d = 1;
  320.     return new Date(y, m, d);
  321. };
  322.  
  323. document.writeln('<div id="__calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;border:1px solid #666666;width:200px;height:216px;">');
  324. document.writeln('<iframe name="__calendarIframe" id="__calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" style="margin:0px;"></iframe>');
  325. var __ci = window.frames['__calendarIframe'];
  326. __ci.document.writeln('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
  327. __ci.document.writeln('<html xmlns="http://www.w3.org/1999/xhtml">');
  328. __ci.document.writeln('<head>');
  329. __ci.document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
  330. __ci.document.writeln('<title>Web Calendar(UTF-8) Written By KimSoft</title>');
  331. __ci.document.writeln('<style type="text/css">');
  332. __ci.document.writeln('<!--');
  333. __ci.document.writeln('body {font-size:12px;margin:0px;text-align:center;}');
  334. __ci.document.writeln('form {margin:0px;}');
  335. __ci.document.writeln('select {font-size:12px;background-color:#EFEFEF;}');
  336. __ci.document.writeln('table {border:0px solid #CCCCCC;background-color:#FFFFFF}');
  337. __ci.document.writeln('th {font-size:12px;font-weight:normal;background-color:#FFFFFF;}');
  338. __ci.document.writeln('th.theader {font-weight:normal;background-color:#666666;color:#FFFFFF;width:24px;}');
  339. __ci.document.writeln('select.year {width:64px;}');
  340. __ci.document.writeln('select.month {width:60px;}');
  341. __ci.document.writeln('td {font-size:12px;text-align:center;}');
  342. __ci.document.writeln('td.sat {color:#0000FF;background-color:#EFEFEF;}');
  343. __ci.document.writeln('td.sun {color:#FF0000;background-color:#EFEFEF;}');
  344. __ci.document.writeln('td.normal {background-color:#EFEFEF;}');
  345. __ci.document.writeln('input.l {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');
  346. __ci.document.writeln('input.r {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');
  347. __ci.document.writeln('input.b {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:100%;height:20px;}');
  348. __ci.document.writeln('-->');
  349. __ci.document.writeln('</style>');
  350. __ci.document.writeln('</head>');
  351. __ci.document.writeln('<body>');
  352. __ci.document.writeln('</body>');
  353. __ci.document.writeln('</html>');
  354. __ci.document.close();
  355. document.writeln('</div>');
  356. var calendar = new Calendar();
  357. //-->
  358. //javascript/6848

回复 "一个非常好用的日历控件 calendar.js代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666