原生js日历插件 js日历效果

时间：2022-06-25 22:14:33 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>日历 - 插件</title>
    
    <style>
        * {padding:0;margin:0;font-size:12px;}
        .fl {float:left}
        .fr {float:right}
        .dn {display:none}
        /*日历 begin*/
.data_box           { }
.showDate           {line-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;font-size:14px;}
.data_table td.active      {color:#fff;background-color:#999}
.data_table td.hover{color:blue;}
.showDate2          {padding:3px 5px;color:#999;border:1px solid #e1e1e1;text-align:center}
.showDate2.active   {border:1px solid #c50000; }
.prev_m,.next_m     {display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体"}
.prev_y,.next_y     {display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体";margin:0 5px;}
/*日历 end*/
    </style>
    <script src="js/base.js" type="text/javascript"></script>
    <script>
LiChang = {
            getByClass: function (oPare, cla) {
                var oChild = oPare.getElementsByTagName("*");
                var arr = [];
                for (var i = 0; i < oChild.length; i++) {
                    var arrCla = oChild[i].className.split(" ");
                    var j;
                    for (var j in arrCla) {
                        if (arrCla[j] == cla) {
                            arr.push(oChild[i]);
                            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")[0];
            _self.dateBox = LiChang.getByClass(_self.obj, "sel_date")[0];
            _self.yearBox = LiChang.getByClass(_self.obj, "year")[0];
            _self.mnBox = LiChang.getByClass(_self.obj, "month")[0];
            _self.dataTable = LiChang.getByClass(_self.dateBox, "data_table")[0];
            _self.tbody = _self.dataTable.tBodies[0];
            _self.td = _self.tbody.getElementsByTagName("td");
            _self.prevM= LiChang.getByClass( _self.dateBox,"prev_m")[0];
            _self.nextM = LiChang.getByClass(_self.dateBox, "next_m")[0];
            _self.prevY = LiChang.getByClass(_self.dateBox, "prev_y")[0];
            _self.nextY = LiChang.getByClass(_self.dateBox, "next_y")[0];
            
            //显示日历
            _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[i].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[i].onmouseover = function () {
                    if (this.className.indexOf("hove") == -1) {
                        this.className += " hover";
                    }
                }
                _self.td[i].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 = [1, 3, 5, 7, 8, 10, 12];            
            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[i].innerHTML = "";
                _self.td[i].className = _self.td[i].className.replace("active", "");
            }
            //如果有31天
            for (var j = 0; j < dayLen; j++) {
                _self.td[j + firstDay].innerHTML = j + 1;
                if (j + 1 == dd && _self.td[j + firstDay].className.indexOf("active")==-1) {
                    _self.td[j + firstDay].className += " ";
                    _self.td[j + firstDay].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 class="articles">
                        <div class="tit02">
                            <h4>相关文章</h4>
                        </div>
                        <ul>
                                                                                                <li>
                                        <a target="_blank" href="/new/400945.htm">《辐射4》q键使用介绍</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400943.htm">《辐射4》人物介绍</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400944.htm">《下一站江湖2》风卷残云获得方法</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400941.htm">《The Star Named EOS未晓星程》配置要求介绍</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400942.htm">《辐射4》设置中文方法</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400939.htm">《辐射4》88号避难所终端机一直初始化解决办法</a>
                                        <span>04-26</span>
                                    </li>
                                                                                    </ul>
                    </div>
                </div>

</div>

</div>
        </div>
    </div>
</div>

<div class="hot-column">
    <div class="cont">
        <div class="tit">
            <h4>热门栏目</h4>
        </div>
        <ul class="clearfix">
            <li>
                <h6><a href="/list-1/" target="_blank">php教程</a></h6>
                <a href="/list-45/" target="_blank">php入门</a>
                <a href="/list-46/" target="_blank">php安全</a>
                <a href="/list-47/" target="_blank">php安装</a>
                <a href="/list-48/" target="_blank">php常用代码</a>
                <a href="/list-49/" target="_blank">php高级应用</a>
            </li>
            <li>
                <h6><a href="/list-2/" target="_blank">asp.net教程</a></h6>
                <a href="/list-78/" target="_blank">基础入门</a>
                <a href="/list-79/" target="_blank">.Net开发</a>
                <a href="/list-80/" target="_blank">C语言</a>
                <a href="/list-81/" target="_blank">VB.Net语言</a>
                <a href="/list-82/" target="_blank">WebService</a>
            </li>
            <li>
                <h6><a href="/list-6/" target="_blank">手机开发</a></h6>
                <a href="/list-208/" target="_blank">安卓教程</a>
                <a href="/list-209/" target="_blank">ios7教程</a>
                <a href="/list-210/" target="_blank">Windows Phone</a>
                <a href="/list-211/" target="_blank">Windows Mobile</a>
                <a href="/list-212/" target="_blank">手机常见问题</a>
            </li>
            <li>
                <h6><a href="/list-3/" target="_blank">css教程</a></h6>
                <a href="/list-99/" target="_blank">CSS入门</a>
                <a href="/list-100/" target="_blank">常用代码</a>
                <a href="/list-101/" target="_blank">经典案例</a>
                <a href="/list-102/" target="_blank">样式布局</a>
                <a href="/list-103/" target="_blank">高级应用</a>
            </li>
            <li>
                <h6><a href="/list-4/" target="_blank">网页制作</a></h6>
                <a href="/list-136/" target="_blank">设计基础</a>
                <a href="/list-137/" target="_blank">Dreamweaver</a>
                <a href="/list-138/" target="_blank">Frontpage</a>
                <a href="/list-139/" target="_blank">js教程</a>
                <a href="/list-140/" target="_blank">XNL/XSLT</a>
            </li>
            <li>
                <h6><a href="/list-7/" target="_blank">办公数码</a></h6>
                <a href="/list-236/" target="_blank">word</a>
                <a href="/list-237/" target="_blank">excel</a>
                <a href="/list-238/" target="_blank">powerpoint</a>
                <a href="/list-239/" target="_blank">金山WPS</a>
                <a href="/list-240/" target="_blank">电脑新手</a>
            </li>
            <li>
                <h6><a href="/list-11/" target="_blank">jsp教程</a></h6>
                <a href="/list-68/" target="_blank">Application与Applet</a>
                <a href="/list-69/" target="_blank">J2EE/EJB/服务器</a>
                <a href="/list-70/" target="_blank">J2ME开发</a>
                <a href="/list-71/" target="_blank">Java基础</a>
                <a href="/list-72/" target="_blank">Java技巧及代码</a>
            </li>
        </ul>
    </div>
</div>

<div class="footer">
    <div class="cont">
        <p>
            <a href="/" target="_self">一聚教程网</a>|
            <a href="javascript:;" class="about" target="_self">关于我们</a>|
            <a href="javascript:;" class="contact" target="_self">联系我们</a>|
            <a href="javascript:;" class="gg_contact" target="_self">广告合作</a>|
            <a href="javascript:;" class="friend_link" target="_self">友情链接</a>|
            <a href="javascript:;" class="copyright_notice" target="_self">版权声明</a>
        </p>
        <p>
            <span>copyRight@2007-2022 www.111CN.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian"></a></span>
        </p>
        <p>
            <span>
                网站内容来自网络整理或网友投稿如有侵权行为请邮件:111cn.com@163.com 我们24小时内处理
            </span>
        </p>
    </div>
</div>
<script src="/jspc/func.js" type="text/javascript"></script>

推荐专题

最新下载

热门教程

原生js日历插件 js日历效果