原生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-441524.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-30</span>
                                </div>
                            </div>
                            <div class="s-card-pic">
                                <img src="/images/lazy.gif" data-src="/uploads/20250630/logo_6861e22548fdf1.webp" alt="《航海王壮志雄心》意志水晶激活哪些方法效果更好" />
                            </div>
                        </a>
                    </li>
                                    <li>
                        <a href="/art-441636.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-30</span>
                                </div>
                            </div>
                            <div class="s-card-pic">
                                <img src="/images/lazy.gif" data-src="/uploads/20250630/logo_6861e3c5e71001.png" alt="区块链新闻：微策略运行机制解读：优势、风险、是否会爆雷及未来展望分析？" />
                            </div>
                        </a>
                    </li>
                                    <li>
                        <a href="/art-441639.htm" class="s-card">
                            <div class="s-card-l">
                                <p class="tit">Ripple的RLUSD成为6月增长最快的稳定币</p>
                                <div class="info">
                                    <span class="person">游戏攻略</span>
                                    <span class="time">2025-06-30</span>
                                </div>
                            </div>
                            <div class="s-card-pic">
                                <img src="/images/lazy.gif" data-src="/uploads/20250630/logo_6861eaf2133aa1.png" alt="Ripple的RLUSD成为6月增长最快的稳定币" />
                            </div>
                        </a>
                    </li>
                                    <li>
                        <a href="/art-441525.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-30</span>
                                </div>
                            </div>
                            <div class="s-card-pic">
                                <img src="/images/lazy.gif" data-src="/uploads/20250630/logo_6861e22c65c5d1.webp" alt="《桃源深处有人家》鸟类亲密度提高哪几种" />
                            </div>
                        </a>
                    </li>
                                    <li>
                        <a href="/art-441527.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-30</span>
                                </div>
                            </div>
                            <div class="s-card-pic">
                                <img src="/images/lazy.gif" data-src="/uploads/20250630/logo_6861e22d6d3881.webp" alt="《异界事务所》艾迪费舍尔角色大全一览" />
                            </div>
                        </a>
                    </li>
                                    <li>
                        <a href="/art-441528.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-30</span>
                                </div>
                            </div>
                            <div class="s-card-pic">
                                <img src="/images/lazy.gif" data-src="/uploads/20250630/logo_6861e22e583e11.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/111138.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250604/logo_683ff1f9ae5de1.png" alt="全民美食街" />
                        </div>
                        <p class="figure-head">全民美食街</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/110756.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250603/logo_683e558156e5b1.png" alt="狗子大挑战" />
                        </div>
                        <p class="figure-head">狗子大挑战</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/111137.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250604/logo_683ff1f87be681.png" alt="武器编年史" />
                        </div>
                        <p class="figure-head">武器编年史</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/112858.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250612/logo_684a3742bb64b1.png" alt="不要在这里停车" />
                        </div>
                        <p class="figure-head">不要在这里停车</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
        <ul class="card-box-b">
                            <li class="card10">
                    <a href="/app/111184.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250604/logo_683ff23dab5161.png" alt="装扮物语" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">装扮物语</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>装扮物语</span>
                            </div>
                            <div class="figure-desc">
                                <p>抖音装扮物语是一款以卡通少女装扮为核心的休闲养成游戏，采用治</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/111182.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250604/logo_683ff23b6aecc1.png" alt="采矿冲刺3D" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">采矿冲刺3D</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>采矿冲刺3D</span>
                            </div>
                            <div class="figure-desc">
                                <p>采矿冲刺3D是一款融合动作与策略的冒险佳作，玩家将化身勇敢的</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/111189.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250604/logo_683ff2453afaf1.png" alt="汽车无双" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">汽车无双</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>汽车无双</span>
                            </div>
                            <div class="figure-desc">
                                <p>汽车无双是一款以卡通风格为基调的沉浸式汽车驾驶竞技作品，以色</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/111188.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250604/logo_683ff2438fcbf1.png" alt="挡火车" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">挡火车</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>挡火车</span>
                            </div>
                            <div class="figure-desc">
                                <p>挡火车带来充满趣味的休闲益智挑战，操控者在游玩中需动用智慧与</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/111186.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250604/logo_683ff2405766e1.png" alt="敲1亿小木鱼" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">敲1亿小木鱼</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>敲1亿小木鱼</span>
                            </div>
                            <div class="figure-desc">
                                <p>敲1亿小木鱼是一款风靡当下的休闲益智趣味之作，玩家通过敲击木</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>