两种实用的日历组件

最新推荐文章于 2024-07-19 12:47:14 发布
最新推荐文章于 2024-07-19 12:47:14 发布
阅读量631 收藏
点赞数 1
分类专栏： js组件 文章标签： html javascript 日历组件 日期选择
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lq_lq314/article/details/65444030
版权

     在网上看了很多日历组件，大部分的日历要么导入的外包太多，要么功能不够完善，无意中发现一个还不错的，纯js实现，一番修改之后觉得挺满意。有两种不同的样式，具体的截图如下：

   

第一种的年份和月份是通过左右的小图标来进行切换选择，第二种则是通过select选择框来选择。具体实现代码如下：


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>日历组件示例</title>
    <style>
        .calendar{font-family:Tahoma; background:#fff; float:left; border-style:solid; border-width:1px; border-color:#85BEE5 #3485C0 #3485C0 #85BEE5; position:relative; padding:10px; }
        .calendar dl,.calendar dd{margin:0; padding:0; width:183px; font-size:12px; line-height:22px;}
        .calendar dt.title-date{ display:block; border-bottom:1px solid #E4E4E4; font-weight:700; position:relative; margin-bottom:5px; padding-bottom:3px;}
        .calendar dt{ float:left; width:25px; margin-left:1px; text-align:center;}
        .calendar dt.title-date{ width:100%;}
        .calendar dd{clear: both;width: 183px;height: 139px;font-weight: 700;background:url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_bg.png) no-repeat; margin:0;}
        .prevyear,.nextyear, .prevmonth,.nextmonth{cursor:pointer;height:9px; background:url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_nextprv.png) no-repeat; overflow:hidden;position:absolute; top:8px; text-indent:-999px;}
        .prevyear{  left:4px;  width:9px;}
        .prevmonth{ width:5px; background-position:-9px 0; left:20px;}
        .nextyear{  width:9px; background-position:-19px 0; right:5px;}
        .nextmonth{ width:5px; background-position:-14px 0; right:20px;}
        .calendar dd a{float: left;width: 25px;height: 22px; color:blue; overflow: hidden; text-decoration: none;
            margin: 1px 0 0 1px; text-align:center;}
        .calendar dd a.disabled{color:#999;}
        .calendar dd a.tody{ color:red; }
        .calendar dd a.on{background:blue; color:#fff;}
        .calendar dd a.live{cursor:pointer}
        .input{ border:1px solid #ccc; padding:4px; background:url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_nextprv.png) no-repeat right -18px;}
    </style>
</head>
<body>
<br/>
<br/>
<h3>支持选择年月          支持SELECT选择年月</h3>
<div><input type="text" id="j_Date1" class="input">          <input type="text" id="j_Date2" class="input"></div>
<br/>

<div></div>
<!--日历控件JS源码-->
<script>
    /**
     * @namespace _CalF
     * 日历控件所用便捷函数
     * */
    _CalF = {
        // 选择元素
        $:function(arg,context){
            var tagAll,n,eles=[],i,sub = arg.substring(1);
            context = context||document;
            if(typeof arg =='string'){
                switch(arg.charAt(0)){
                    case '#':
                        return document.getElementById(sub);
                        break;
                    case '.':
                        if(context.getElementsByClassName) return context.getElementsByClassName(sub);
                        tagAll = _CalF.$('*',context);
                        n = tagAll.length;
                        for(i = 0;i<n;i++){
                            if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                        }
                        return eles;
                        break;
                    default:
                        return context.getElementsByTagName(arg);
                        break;
                }
            }
        },
        // 绑定事件
        bind:function(node,type,handler){
            node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);
        },
        // 获取元素位置
        getPos:function (node) {
            var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                scrollt = document.documentElement.scrollTop || document.body.scrollTop;
            pos = node.getBoundingClientRect();
            return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
        },
        // 添加样式名
        addClass:function(c,node){
            node.className = node.className + ' ' + c;
        },
        // 移除样式名
        removeClass:function(c,node){
            var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)","g");
            node.className = node.className.replace(reg, '');
        },
        // 阻止冒泡
        stopPropagation:function(event){
            event = event || window.event;
            event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
        }
    };

    function Calender() {
        this.initialize.apply(this, arguments);
    }
    Calender.prototype = {
        constructor:Calender,
        // 模板数组
        _template :[
            '<dl>',
            '<dt class="title-date">',
            '<span class="prevyear">prevyear</span><span class="prevmonth">prevmonth</span>',
            '<span class="nextyear">nextyear</span><span class="nextmonth">nextmonth</span>',
            '</dt>',
            '<dt><strong>日</strong></dt>',
            '<dt>一</dt>',
            '<dt>二</dt>',
            '<dt>三</dt>',
            '<dt>四</dt>',
            '<dt>五</dt>',
            '<dt><strong>六</strong></dt>',
            '<dd></dd>',
            '</dl>'],
        // 初始化对象
        initialize :function (options) {
            this.id = options.id; // input的ID
            this.input = _CalF.$('#'+ this.id); // 获取INPUT元素
            this.isSelect = options.isSelect;   // 是否支持下拉SELECT选择年月，默认不显示
            this.inputEvent(); // input的事件绑定，获取焦点事件
        },
        // 创建日期最外层盒子，并设置盒子的绝对定位
        createContainer:function(){
            // 如果存在，则移除整个日期层Container
            var odiv = _CalF.$('#'+ this.id + '-date');
            if(!!odiv) odiv.parentNode.removeChild(odiv);
            var container = this.container = document.createElement('div');
            container.id = this.id + '-date';
            container.style.position = "absolute";
            container.zIndex = 999;
            // 获取input表单位置inputPos
            var input = _CalF.$('#' + this.id),
                inputPos = _CalF.getPos(input);
            // 根据input的位置设置container高度
            container.style.left = inputPos.left + 'px';
            container.style.top = inputPos.bottom - 1 + 'px';
            // 设置日期层上的单击事件，仅供阻止冒泡，用途在日期层外单击关闭日期层
            _CalF.bind(container, 'click', _CalF.stopPropagation);
            document.body.appendChild(container);
        },
        // 渲染日期
        drawDate:function (odate) { // 参数 odate 为日期对象格式
            var dateWarp, titleDate, dd, year, month, date, days, weekStart,i,l,ddHtml=[],textNode;
            var nowDate = new Date(),nowyear = nowDate.getFullYear(),nowmonth = nowDate.getMonth(),
                nowdate = nowDate.getDate();
            this.dateWarp = dateWarp = document.createElement('div');
            dateWarp.className = 'calendar';
            dateWarp.innerHTML = this._template.join('');
            this.year = year = odate.getFullYear();
            this.month = month = odate.getMonth()+1;
            this.date = date = odate.getDate();
            this.titleDate = titleDate = _CalF.$('.title-date', dateWarp)[0];
            // 是否显示SELECT
            if(this.isSelect){
                var selectHtmls =[];
                selectHtmls.push('<select>');
                for(i = 2020;i>1970;i--){
                    if(i != this.year){
                        selectHtmls.push('<option value ="'+ i +'">'+ i +'</option>');
                    }else{
                        selectHtmls.push('<option value ="'+ i +'" selected>'+ i +'</option>');
                    }
                }
                selectHtmls.push('</select>');
                selectHtmls.push('年');
                selectHtmls.push('<select>');
                for(i = 1;i<13;i++){
                    if(i != this.month){
                        selectHtmls.push('<option value ="'+ i +'">'+ i +'</option>');
                    }else{
                        selectHtmls.push('<option value ="'+ i +'" selected>'+ i +'</option>');
                    }
                }
                selectHtmls.push('</select>');
                selectHtmls.push('月');
                titleDate.innerHTML = selectHtmls.join('');
                // 绑定change事件
                this.selectChange();
            }else{
                textNode = document.createTextNode(year + '年' + month + '月');
                titleDate.appendChild(textNode);
                this.btnEvent();
            }
            // 获取模板中唯一的DD元素
            this.dd = dd = _CalF.$('dd',dateWarp)[0];
            // 获取本月天数
            days = new Date(year, month, 0).getDate();
            // 获取本月第一天是星期几
            weekStart = new Date(year, month-1,1).getDay();
            // 开头显示空白段
            for (i = 0; i < weekStart; i++) {
                ddHtml.push('<a> </a>');
            }
            // 循环显示日期
            for (i = 1; i <= days; i++) {
                if (year < nowyear) {
                    ddHtml.push('<a class="live disabled">' + i + '</a>');
                } else if (year == nowyear) {
                    if (month < nowmonth + 1) {
                        ddHtml.push('<a class="live disabled">' + i + '</a>');
                    } else if (month == nowmonth + 1) {
                        if (i < nowdate) ddHtml.push('<a class="live disabled">' + i + '</a>');
                        if (i == nowdate) ddHtml.push('<a class="live tody">' + i + '</a>');
                        if (i > nowdate) ddHtml.push('<a class="live">' + i + '</a>');
                    } else if (month > nowmonth + 1) {
                        ddHtml.push('<a class="live">' + i + '</a>');
                    }
                } else if (year > nowyear) {
                    ddHtml.push('<a class="live">' + i + '</a>');
                }
            }
            dd.innerHTML = ddHtml.join('');

            // 如果存在，则先移除
            this.removeDate();
            // 添加
            this.container.appendChild(dateWarp);

            //IE6 select遮罩
            var ie6  = !!window.ActiveXObject && !window.XMLHttpRequest;
            if(ie6) dateWarp.appendChild(this.createIframe());

            // A link事件绑定
            this.linkOn();
            // 区域外事件绑定
            this.outClick();
        },

        createIframe:function(){
            var myIframe =  document.createElement('iframe');
            myIframe.src = 'about:blank';
            myIframe.style.position = 'absolute';
            myIframe.style.zIndex = '-1';
            myIframe.style.left = '-1px';
            myIframe.style.top = 0;
            myIframe.style.border = 0;
            myIframe.style.filter = 'alpha(opacity= 0 )';
            myIframe.style.width = this.container.offsetWidth + 'px';
            myIframe.style.height = this.container.offsetHeight + 'px';
            return myIframe;

        },

        // SELECT CHANGE 事件
        selectChange:function(){
            var selects,yearSelect,monthSelect,that = this;
            selects = _CalF.$('select',this.titleDate);
            yearSelect = selects[0];
            monthSelect = selects[1];
            _CalF.bind(yearSelect, 'change',function(){
                var year = yearSelect.value;
                var month = monthSelect.value;
                that.drawDate(new Date(year, month-1, that.date));
            });
            _CalF.bind(monthSelect, 'change',function(){
                var year = yearSelect.value;
                var month = monthSelect.value;
                that.drawDate(new Date(year, month-1, that.date));
            })
        },
        // 移除日期DIV.calendar
        removeDate:function(){
            var odiv = _CalF.$('.calendar',this.container)[0];
            if(!!odiv) this.container.removeChild(odiv);
        },
        // 上一月，下一月按钮事件
        btnEvent:function(){
            var prevyear = _CalF.$('.prevyear',this.dateWarp)[0],
                prevmonth = _CalF.$('.prevmonth',this.dateWarp)[0],
                nextyear = _CalF.$('.nextyear',this.dateWarp)[0],
                nextmonth = _CalF.$('.nextmonth',this.dateWarp)[0],
                that = this;
            prevyear.onclick = function(){
                var idate = new Date(that.year-1, that.month-1, that.date);
                that.drawDate(idate);
            };
            prevmonth.onclick = function(){
                var idate = new Date(that.year, that.month-2,that.date);
                that.drawDate(idate);
            };
            nextyear.onclick = function(){
                var idate = new Date(that.year + 1,that.month - 1, that.date);
                that.drawDate(idate);
            };
            nextmonth.onclick = function(){
                var idate = new Date(that.year , that.month, that.date);
                that.drawDate(idate);
            }
        },
        // A 的事件
        linkOn:function(){
            var links = _CalF.$('.live',this.dd),i,l=links.length,that=this;
            for(i = 0;i<l;i++){
                links[i].index = i;
                links[i].onmouseover = function(){
                    _CalF.addClass("on",links[this.index]);
                };
                links[i].onmouseout = function(){
                    _CalF.removeClass("on",links[this.index]);
                };
                links[i].onclick = function(){
                    that.date = this.innerHTML;
                    that.input.value = that.year + '-' + that.month + '-' + that.date;
                    that.removeDate();
                }
            }
        },
        // 表单的事件
        inputEvent:function(){
            var that = this;
            _CalF.bind(this.input, 'focus',function(){
                that.createContainer();
                that.drawDate(new Date());
            });
        },
        // 鼠标在对象区域外点击，移除日期层
        outClick:function(){
            var that = this;
            _CalF.bind(document, 'click',function(event){
                event = event || window.event;
                var target = event.target || event.srcElement;
                if(target == that.input)return;
                that.removeDate();
            })
        }
    };
    var myDate1 = new Calender({id:'j_Date1'});
    var myDate2 = new Calender({id:'j_Date2',isSelect:!0});
</script>
</body>
</html>

希望能给大家带来帮助，谢谢！




中南小鲨鱼
关注
专栏目录
日历事件组件网页模板
01-23
日历组件是网页应用中常见的一种UI元素，用于显示日期和时间信息，允许用户选择特定日期或设定事件。这些组件通常具有直观的交互性，如滑动切换月份、点击添加事件等。在网页模板中，日历组件会与页面其他元素无缝...
(转)js日历特效
学如逆水行舟，不进则退！
09-24 899
在做项目的时候，需要一个日历的功能，
JavaScript版带闹钟提醒日历
xing3956的博客
11-02 250
一个简单的JavaScript版带闹钟提醒日历，使用css+javascript编写。
打造超酷的 React 迷你日历组件，只需几步！
最新发布
技小白的博客
07-19 1101
现在市面上的组件库大多包含日历组件，那么它们具体是如何实现的呢？其实原理很简单，主要是通过使用Date对象的相关API。今天我们就来开发一个迷你版的日历组件。
分享66个时间日期JS特效，总有一款适合您
weixin_47730343的博客
02-12 794
splitting+css3制作的3D立体数字时钟滚动特效。js+css3带全屏背景图片切换网页日历特效。jQuery实现的挂在墙上的简约圆盘时钟动画。分享66个时间日期JS特效，总有一款适合您。HTML5 SVG卡通创意粒子时钟动画特效。css+js实现的颜色渐变数字时钟动画特效。html5带日期和动画场景的天气预报特效。JS+CSS3日历本挂历点击掉落动画特效。js+css3精美质感圆形时钟网页特效。js基于css3制作的圆形虚线时钟特效。Javascript模拟时钟动画特效。
JS+CSS实现漂亮的日历特效（仿win10系统日历）
热门推荐
我爱吃豆芽呀
12-12 1万+
初衷：无意见发现win10的系统日鼠标悬浮的特效非常好看，想尝试一下用CSS和JS实现一下。 先上一下目前实现的效果图： 难点是这种间隔效果和鼠标移动效果的实现，如下图 间隔效果的实现我采用了 background-clip: content-box; padding: 2px; background-color: gray; border: 1px solid gray; 样...
#学习笔记#(44)日历翻页效果CSS3+JS
Pluto
02-24 3191
html代码如下 日历翻页效果 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 上个月 下个月 js代码如下 //获得所有的月份 //var oMonth=document.g
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
1. **语言切换**：修复了原组件无法切换语言的bug，现在支持`lang='zh-CN'`和`en`两种语言，方便国际化应用的需求。 2. **位置选项**：增加了日历面板的位置选项，通过设置`position=right`可以让面板右对齐，提供...
功能完善的小程序日历组件的实现
10-15
在小程序中，日历组件的定制化需求往往较高，因此创建一个既美观又实用的日历组件是一项挑战。 首先，我们需要了解日历组件的基本功能。一个功能完善的小程序日历组件通常包括以下特性： 1. **自定义显示模式**：...
Jquery Easyui日历组件Calender使用详解（23）
10-20
在具体使用Jquery Easyui日历组件Calender时，开发者可以通过Class加载或者JS调用两种方式实现日历控件的初始化。Class加载是通过在HTML标签中引入easyui-calendar类，并且可以自定义样式来实现日历的渲染。而JS调用...
recal使用现代CSS实现的ReactPreact日历组件
08-07
在IT行业中，React和Preact是两种非常流行的JavaScript库，用于构建用户界面，特别是单页面应用程序（SPA）。本文将深入探讨“recal”这个项目，它是一个基于现代CSS技术实现的React和Preact的日历组件。 标题中的...
JS实现简单日历特效
10-15
主要为大家详细介绍了JS实现简单日历特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用js实现一个简单可翻页的日历
qq_54681491的博客
02-06 1164
用js实现一个简单可翻页的日历 1 动态渲染头部年月 2 获取上月本月及下月要显示的天数 3 上下翻页切换月份 <div class="box"> <div class="header"> <span class="prev">上</span> <span class="current"></span> <span class="next"&
vue实现简单的数据筛选
huihuihaha222222的博客
06-26 2733
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv...
asp前端日历_ASP+JavaScript的完整的日历使用-ASP教程,ASP应用
weixin_39554172的博客
12-22 159
第一步：保存下列文件为:calendar.aspfunction sfont(isize,sface,scolor,bscale)dim soutputstrsoutputstr = "if sface <> "" thensoutputstr = soutputstr & " face=" & sface & ""elsesoutputstr = soutpu...
VUE jQuery+VUE带实时节气创意圆形罗盘时钟动画特效
qq_43434300的博客
08-24 1370
1.外部引用的js文件 ①jquery版本：jquery-3.3.1.js ②vue引入：vue.js <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> ③cheshi9.js const vm = new Vue({ el: '#sum', data() { return { flag: [ '零秒', '一秒',
asp前端日历_asp显示日历效果
weixin_39713805的博客
12-22 511
asp显示日历效果td { font-family: "宋体"; font-size:9pt}'先判断是否指定了一个年份和月份，没有则根据当前的年和月份显示If Request("ReqDate")="" thenCurrentDate=DateelseCurrentDate=Trim(Request("ReqDate"))end ifpyear=year(CurrentDate)pmonth=m...
v-calendar 日历组件使用&自定义提示内容
jinse29的博客
11-09 6413
最近项目中用到了日历插件，需要统计每天的任务数量，类似elementui的badge组件，待办任务数量大概最后的效果如下图所示，右上角把代办任务数量展示出来vue的日历相关组件挺多的，选了v-calendar，后期翻API有点难受，中文版不太好找，简单记录下。
vue原生方式实现日历组件
hyduan_h5的博客
06-02 6766
vue原生实现日历组件
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值