前段時間也做了一個日曆專案，不過依賴於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();
 

或者有需要原始碼到可以留下郵箱！