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

作者：袖梨 2022-06-25

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

<!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>
        </div>
            </section>
    <section class="wrap-box">
        <div class="g-tit">
            <h2>相关文章</h2>
        </div>
        <ul class="s-list nobord notop">
                            <li>
                    <a href="/art-434846.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">《三国志战棋版》夏侯惇属性战法搭配技巧全解</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-06-08</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250605/logo_6840fb65e100b1.webp" alt="《三国志战棋版》夏侯惇属性战法搭配技巧全解" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-435661.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">全球数字货币交易所排名前10名单 2025数字货币交易平台榜单</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-06-08</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250606/logo_6842a362e10641.pjp" alt="全球数字货币交易所排名前10名单 2025数字货币交易平台榜单" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-435917.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">卡尔达诺将与比特币和瑞波币建立关系，跻身五大加密货币之列：顶级分析师预测</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-06-08</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250608/logo_6844e9f2501861.png" alt="卡尔达诺将与比特币和瑞波币建立关系，跻身五大加密货币之列：顶级分析师预测" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-435514.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">最好用2025全球虚拟币交易所推荐排行榜-最火交易所币安</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-06-08</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250607/logo_6843ebd9540481.jpg" alt="最好用2025全球虚拟币交易所推荐排行榜-最火交易所币安" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-434847.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">《众神派对》围斯盖雏斯角色介绍</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-06-08</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250605/logo_6840fb66962671.webp" alt="《众神派对》围斯盖雏斯角色介绍" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-434848.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">《三国志战棋版》李儒属性战法搭配技巧全解</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-06-08</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250605/logo_6840fb68210e81.webp" alt="《三国志战棋版》李儒属性战法搭配技巧全解" />
                        </div>
                    </a>
                </li>
                    </ul>
    </section>
    <section class="wrap-box">
        <div class="g-tit">
            <h2>精彩推荐</h2>
        </div>
        <ul class="card-box">
                            <li class="card3">
                    <a href="/app/104700.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811caf0a88eb1.png" alt="茶杯头甜蜜终章dlc 官方手机版v1.0.0.3" />
                        </div>
                        <p class="figure-head">茶杯头甜蜜终章dlc 官方手机版v1.0.0.3</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/104676.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811cab87dfe81.png" alt="火柴人传说暗影格斗内置菜单 最新版v3.0.1" />
                        </div>
                        <p class="figure-head">火柴人传说暗影格斗内置菜单 最新版v3.0.1</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/104628.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_68119aea40ebd1.png" alt="荒野乱斗测试服 安卓版v61.10.3" />
                        </div>
                        <p class="figure-head">荒野乱斗测试服 安卓版v61.10.3</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/104614.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_68119aa23457c1.png" alt="荒野乱斗彩虹服 安卓版v61.10.3" />
                        </div>
                        <p class="figure-head">荒野乱斗彩虹服 安卓版v61.10.3</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
        <ul class="card-box-b">
                            <li class="card10">
                    <a href="/app/104699.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811caec6cfea1.png" alt="寒霜启示录 安卓版v1.25.10" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">寒霜启示录 安卓版v1.25.10</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>寒霜启示录 安卓版v1.25.10</span>
                            </div>
                            <div class="figure-desc">
                                <p>寒霜启示录是一款生存模拟游戏，不少玩家可能对于末日都有着自己</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/104698.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811caeb150841.png" alt="末日城堡免广告版 安卓最新版v0.7.1" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">末日城堡免广告版 安卓最新版v0.7.1</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>末日城堡免广告版 安卓最新版v0.7.1</span>
                            </div>
                            <div class="figure-desc">
                                <p>末日城堡免广告版是一款非常好玩的模拟经营类游戏，内部可以不看</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/104696.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811cae5834611.png" alt="甜蜜人生模拟器 最新版v1.4.5" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">甜蜜人生模拟器 最新版v1.4.5</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>甜蜜人生模拟器 最新版v1.4.5</span>
                            </div>
                            <div class="figure-desc">
                                <p>甜蜜人生模拟器是一款非常好玩的模拟恋爱手游，玩家在这里能够对</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/104679.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811cabe2a4361.png" alt="武器锻造师内置功能菜单 v10.4" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">武器锻造师内置功能菜单 v10.4</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>武器锻造师内置功能菜单 v10.4</span>
                            </div>
                            <div class="figure-desc">
                                <p>武器锻造师内置菜单版是游戏的破解版本，在该版本中为玩家提供了</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/104644.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_68119b20cd7bb1.png" alt="开放空间overfield 安卓版v1.0.5" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">开放空间overfield 安卓版v1.0.5</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>开放空间overfield 安卓版v1.0.5</span>
                            </div>
                            <div class="figure-desc">
                                <p>开放空间Overfield是一款箱庭养成经营手游，让你在广阔</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
    </section>
    <footer class="foot">
    <a href="/" class="logo-icon">
        <img src="/mobile/images/logo2.png" alt="一聚教程网">
    </a>
    <p>Copyright © 2010-2022</p>
    <p>111cn.net All Rights Reserved</p>

</footer>
<script>
    var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"};
</script>
<script src="/jspc/funcmob.js" type="text/javascript"></script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-DSRRGRV1TL');
</script>    <div class="back-top" style="display: block;">
        <span class="icon-box">
            <svg class="icon" viewBox="0 0 1024 1024">
                <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path>
            </svg>
        </span>
    </div>
</div>
<script src="/js/stat.js"></script>
</body>
</html>