最简单的原生javascript日历控件

CodeAE 发表于 2025-8-2 22:33

最简单符合标准的原生javascript日期选择控件，调用方便；简单修改CSS即可实现完全自定义样式，兼容各大主流浏览器。

示例：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>日历 - CODETC PHP网站开发技术</title>
<style type="text/css">
* {padding:0;margin:0;font-size:12px;}
.fl {float:left}
.fr {float:right}
.dn {display:none}
/*日历 begin*/
.data_box {width:260px; }
.showDate {width:248px;height:28px;line-height:28px;padding:0 5px;border:1px solid #e1e1e1;color:#999;}
.show_mn {text-align:center;padding:0 20px;}
.sel_date {margin-top:10px;border:1px solid #999;padding:3px}
.data_table {width:100%;margin-top:10px;}
.data_table td {text-align:center;cursor:pointer;height:24px;font-size:14px;}
.data_table td.active {color:#fff;background-color:#999}
.data_table td.hover{color:blue;}
.showDate2 {width:35px;padding:3px 5px;color:#999;border:1px solid #e1e1e1;text-align:center}
.showDate2.active {border:1px solid #c50000; }
.prev_m,.next_m {width:10px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体"}
.prev_y,.next_y {width:18px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体";margin:0 5px;}
/*日历 end*/
</style>
<script type="text/javascript">
LiChang = {
         getByClass: function (oPare, cla) {
            var oChild = oPare.getElementsByTagName("*");
            var arr = [];
            for (var i = 0; i < oChild.length; i++) {
               var arrCla = oChild.className.split(" ");
               var j;
               for (var j in arrCla) {
                     if (arrCla == cla) {
                        arr.push(oChild);
                        break;
                     }
               }
            }
            return arr;
         }
   }
function showDate(option) {
   this.obj = document.getElementById(option.id);
}
showDate.prototype.init = function () {
   var _self = this;
   _self.dateText = LiChang.getByClass(_self.obj, "showDate");
   _self.dateBox = LiChang.getByClass(_self.obj, "sel_date");
   _self.yearBox = LiChang.getByClass(_self.obj, "year");
   _self.mnBox = LiChang.getByClass(_self.obj, "month");
   _self.dataTable = LiChang.getByClass(_self.dateBox, "data_table");
   _self.tbody = _self.dataTable.tBodies;
   _self.td = _self.tbody.getElementsByTagName("td");
   _self.prevM= LiChang.getByClass( _self.dateBox,"prev_m");
   _self.nextM = LiChang.getByClass(_self.dateBox, "next_m");
   _self.prevY = LiChang.getByClass(_self.dateBox, "prev_y");
   _self.nextY = LiChang.getByClass(_self.dateBox, "next_y");
   //显示日历
   _self.dateText.onfocus = function () {
            _self.changeDefault(this);
            _self.show();
            _self.showNow();
            //_self.dateText.blur();
   }
   //点击空白隐藏日历
   document.onclick = function (event) {
            event = event || window.event;
            var Target = event.target || event.srcElement;
            _self.hide(event, Target,this);
   }
   //点击选择日期
   for (var i = 0; i < _self.td.length; i++) {
            _self.td.onclick = function () {
                     var newDd = this.innerHTML;
                     var newYear = _self.yearBox.value;
                     var newMn = _self.mnBox.value;
                     if (newDd.match(/^\s{0}$/g)) {//如果td有值;
                           return false;
                     }
                     _self.dateText.value = newYear + "年" + newMn + "月" + newDd + "日";
                     _self.dateBox.className += " ";
                     _self.dateBox.className += "dn";
            }
            _self.td.onmouseover = function () {
                     if (this.className.indexOf("hove") == -1) {
                           this.className += " hover";
                     }
            }
            _self.td.onmouseout = function () {
                     this.className = this.className.replace("hover","")
            }
   }
   //点击切换月份
   _self.prevM.onclick =_self.nextM.onclick= function () {
            _self.changeMn(this);
            return this;
   }
   //点击切换年份
   _self.prevY.onclick = _self.nextY.onclick = function () {
            _self.changeYr(this);
            return this;
   }
}
//点击切换月份
showDate.prototype.changeMn = function (obj) {
   var _self = this;
   var NewMn = parseInt(_self.mnBox.value, 10);

   var newYear = parseInt(_self.yearBox.value, 10);
   if (obj == _self.nextM) {
            NewMn++;
   } else {
            NewMn--;
   }
   if (NewMn < 1) {
            NewMn = 12;
            newYear -= 1;
   } else if (NewMn > 12) {
            NewMn = 1;
            newYear += 1;
   }
   _self.mnBox.value = NewMn;
   _self.showNow(newYear, NewMn);
}
//点击切换年份
showDate.prototype.changeYr = function (obj) {
   var _self = this;
   var NewMn = parseInt(_self.mnBox.value, 10);
   var newYear = parseInt(_self.yearBox.value, 10);
   if (obj == _self.nextY) {
            newYear++;
   } else {
            newYear--;
   }
   if (newYear < 1900) {
            newYear = 1900;
   } else if (newYear > 2099) {
            newYear = 2099;
   }
   _self.mnBox.value = NewMn;
   _self.showNow(newYear, NewMn);
}
//文本框清空初始值
showDate.prototype.changeDefault = function (obj) {
   var _self = this;
   var deVal = obj.defaultValue;
   if (obj.value == deVal) {
            obj.value = "";
   }
}
//文本框还原初始值
showDate.prototype.changeDefault2 = function (obj) {
   var _self = this;
   var deVal = obj.defaultValue;
   if (obj.value.match(/^\s{0}$/)) {
            obj.value = deVal;
   }
}
//显示日历
showDate.prototype.show = function () {
   var _self = this;
   if (_self.dateBox.className.indexOf("dn") != -1) {
            var cls = _self.dateBox.className;
            _self.dateBox.className = cls.replace("dn", "");
   }
}
//隐藏日历
showDate.prototype.hide = function (event, Target, obj) {
   var _self = this;
   var oPare = Target.parentNode;
   var isChild = true; //默认是子元素
   if (oPare == obj || Target == obj) {
            isChild = false;
   } else {
            loop: while (oPare != _self.obj) {
                     oPare = oPare.parentNode;
                     if (oPare == obj) {
                           isChild = false;
                           break loop;
                     }
            }
   }
   if (!isChild && _self.dateBox.className.indexOf("dn") == -1) {
            _self.dateBox.className += " ";
            _self.dateBox.className += "dn";
            _self.changeDefault2(_self.dateText);
   }

}
//填充年、月
showDate.prototype.showNow = function (yr,mn) {
   var _self = this;
   var now = new Date();
   var year = yr || now.getFullYear();
   var month = mn-1 || now.getMonth();
   var dd = now.getDate();
   //填充年和月
   _self.yearBox.value = year;
   _self.mnBox.value = mn || now.getMonth()+1;
   //填充日期
   _self.showAllDay(year, month, dd);
}
//填充当月的所有日期
showDate.prototype.showAllDay = function (Yr, Mn, Dd) {
   var _self = this;
   var arr31 = ;
   var is31 = true;
   var newDd = new Date();//根据传入的数值生成新的日期
   newDd.setFullYear(Yr,Mn,Dd);
   var year = newDd.getFullYear(),
            month = newDd.getMonth(),
            dd = newDd.getDate();
   var firstD = new Date();
   firstD.setFullYear(year, month, 1);
   var firstDay = firstD.getDay();
   var str31 = arr31.join(",");
   var regExp = eval("/" + (month + 1) + ",|," + (month + 1) + ",|," + (month + 1) + "/g");
   var dayLen = 31;
   //判断每个月有多少天
   if (str31.search(regExp) == -1) {
            dayLen = 30;
   }
   //清空日期
   for (var i = 0; i < _self.td.length; i++) {
            _self.td.innerHTML = "";
            _self.td.className = _self.td.className.replace("active", "");
   }
   //如果有31天
   for (var j = 0; j < dayLen; j++) {
            _self.td.innerHTML = j + 1;
            if (j + 1 == dd && _self.td.className.indexOf("active")==-1) {
                     _self.td.className += " ";
                     _self.td.className += "active";
            }
   }
}
//函数调用
window.onload = function () {
   var showDate1 = new showDate({ id: "data_box" });
   showDate1.init();
}
</script>
</head>
<body>
<div class="clearfix dome3_box">
   
   <div class="data_box" id="data_box">
         <input type="text"class="showDate" value="点击选择日期" />
         <div class="sel_date dn">
            <div class="clearfix">
               <span class="prev_y fl"><<</span><span class="prev_m fl"><</span>
               <span class="next_y fr">>></span><span class="next_m fr">></span>
               <div class="show_mn">
                     <input type="text" class="showDate2 year" value="选择年份" />
                     <span class="ml5 mr5">年</span>
                     <input type="text" class="showDate2 month" value="选择月份" />
                     <span class="ml5">月</span>
               </div>
            </div>
            <table class="data_table">
               <thead>
                     <tr>
                        <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
                     </tr>
               </thead>
               <tbody>
                     <tr>
                        <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
                     </tr>
                     <tr>
                        <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
                     </tr>
                     <tr>
                        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                     </tr>
                     <tr>
                        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                     </tr>
                     <tr>
                        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                     </tr>
                     <tr>
                        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                     </tr>
               </tbody>
            </table>
         </div>
   </div>
   
</div>
</body>
</html>http://www.codetc.com/article-36-1.html

页: [1]

CodeAE代码之家-专为程序员打造的技术家园！-网站地图

最简单的原生javascript日历控件