移动端calendar日历开发＋swiper（支持左右点击，滑屏滚动）

最新推荐文章于 2024-05-14 09:49:49 发布

置顶京都玩家

最新推荐文章于 2024-05-14 09:49:49 发布

阅读量1.1w

点赞数 2

分类专栏：日历 javascript 文章标签：移动日历 calendar.js jquery Javascript

本文链接：https://blog.csdn.net/hzaini89/article/details/52872167

版权

javascript 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

日历

1 篇文章 0 订阅

订阅专栏

前段时间也做了一个日历项目，不过依赖于jQuery，最近这个项目要求用原生js，便又重新封装了下；

先看效果图：

html：

    <div class="uzai-header">
        <i class="iconfont icon-back" ng-click="backpage();"></i>
        <b>选择日期</b>
    </div>

    <div class="uzai-container">
        <!--日历部分-->
        <div class="uzai-calender">
            <div class="red-bg">

                <div class="switch-btn">
                    <b class="left"></b>
                    <b class="right"></b>
                    <div class="center">
                        <i class="circle"></i>
                        <p>
                            <span class="month"></span>
                            <span class="year">
                                    <b>月</b><br />
                                    <b></b>
                                </span>
                        </p>
                        <i class="circle"></i>
                    </div>
                </div>

                <i class="triangles"></i>
                <!--星期-->
                <div class="calendar-week">
                    <ul class="week-list"></ul>
                </div>

            </div>
            <div class="container-center">
                <div class="device">
                    <a class="arrow-left" href="#"></a>
                    <a class="arrow-right" href="#"></a>
                    <div class="swiper-container container">
                        <div class="swiper-wrapper box-center swiper" id="list">

                        </div>
                    </div>
                    <div class="pagination"></div>
                </div>
                <!--库存-->
                <div class="stock zHide"><b class="m"></b>月<b class="d"></b>日出发仅剩<b class="nums">  </b>个余位</div>
            </div>
        </div>
    </div>

js：

 /***
     * @CreateCalendar 构造函数，统筹日历
     */
    var CreateCalendar = {
        create:function(){
            'use strict';
            var CreateCalendar ={
                init:function(){    //  初始化函数
                    // to do ...
                    this.changeTitle();
                    this.addWeekColor();
                    this.getDateCur();
                },
                addWeekColor:function(){  //    周六日 title
                    var _weekList = document.getElementsByClassName('week-list')[0],
                        _li = _weekList.getElementsByTagName('li'),_len=_li.length;
                    _li[0].style.color = 'red';
                    _li[_len - 1].style.color = 'red';
                },
                getDateCur:function(){  //  添加“今天，明天，后天”
                    var GetDateStr = function(){
                        var _dd = new Date();
                        _dd.setDate(_dd.getDate()); //  获取
                        var _y = _dd.getFullYear(),_m=_dd.getMonth()+1,_d = _dd.getDate();
                        return _y + '-' + _m +'-' +_d;
                    };
                    var _cBox =document.getElementsByClassName('box-center')[0],
                        _calendars = document.getElementsByClassName('calendar-box'),
                        _cLens = _calendars.length,
                        _ul = document.getElementsByClassName('day-list');

                    for(var i=0;i<_ul.length;i++){
                        var _li = _ul[i].childNodes;
                        for(var j=0;j<_li.length;j++){
                            _li[j].setAttribute('data-index',j);
                            var _date = _li[j].getAttribute('data-time');
                            if(_date == GetDateStr(0)){
                                console.log('今天是：'+_li[j].getAttribute('data-time'));
                                if(!_li[j].className.match(new RegExp('(\\s|^)' + 'now' + '(\\s|$)'))){ //今天添加now
                                    _li[j].className += ' '+ 'now';
                                }
                                if(_li[j].className.match(new RegExp('(\\s|^)' + 'off' + '(\\s|$)'))){
                                    _li[j].className = _li[j].className.replace(new RegExp('(\\s|^)' + 'off' + '(\\s|$)'), '');
                                }
                            }
                        }
                    }
                    /**
                     * @_nowset class为now的日期转化为时间戳
                     * @_dataset    获得所有日期转化为时间戳
                     * @_dataset 与 _nowset  进行对比，小于_nowset的禁止用户点击 
                     */
                    var _nowset = Date.parse(new Date(document.getElementsByClassName('now')[0].dataset.time)) / 1000;  //  
                    console.log('今天时间戳：'+_nowset);

                    for(var i=0;i<_ul.length;i++){
                        // _ul[i].index = i;
                        var _li = _ul[i].childNodes;
                        for(var j=0;j<_li.length;j++){                
                            var _dateset = Date.parse(new Date(_li[j].dataset.time)) / 1000;
                            if(_li[j].dataset.time){
                                // var _less = _li[j].dataset.time;
                                if(_dateset < _nowset){
                                    _li[j].classList.add('off');
                                    // if(!_li[j].className.match(new RegExp('(\\s|^)' + 'over' + '(\\s|$)'))){ //今天添加now
                                    //     _li[j].className += ' '+ 'over';
                                    // }
                                    _li[j].classList.add('over');   //今天之前的日期
                                    _li[j].onclick = function(){
                                        return false;
                                    };
                                }
                            }

                        }
                    }

                    var _now = document.getElementsByClassName('now')[0];
                    _now.childNodes[0].innerHTML = '今天';

                },
                changeTitle:function(){ //点击切换左右按钮
                    var _switchBtn = document.getElementsByClassName('switch-btn')[0],
                        _left = _switchBtn.getElementsByClassName('left')[0],
                        _right = _switchBtn.getElementsByClassName('right')[0];
                    _left.onclick = function(){     //点击左侧月份按钮
                        swiper.prev();
                        
                        setTimeout(function(){
                            changeMonth();
                        },500);
                    };
                    _right.onclick = function(){    //点击右侧月份按钮
                        swiper.next();
                        setTimeout(function(){
                            changeMonth();
                        },500);
                    };
                }
            };
            return CreateCalendar;
        }
    };

    var myCalendar = CreateCalendar.create();
    myCalendar.init();

温馨提示：由于代码较多，已经上传Github：https://hzaini1989.github.io/-js-calendar/ 点击打开链接

或者有需要源码到可以留下邮箱！

先附上源码：https://github.com/hzaini1989/-js-calendar