前一篇文章剛給大家分享了滑動元件（http://blog.csdn.net/sq_zhuyi/article/details/79103683），本篇文章就正好利用到這個滑動元件，在日曆控制元件中實現選擇時間的模組。同樣，為了便於入題，我們先看效果圖：

這是一個在租車專案中選擇取車時間和還車時間的日曆，其實同樣的場景被用於很多旅遊專案，用來選擇出發、返程時間。

上程式碼，CSS模組：

.acal {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    z-index: 100;
}

.acal .head {
    position: fixed;
    left: 0;
    right: 0;
    top: 44px;
    z-index: 12;
    height: 44px;
    padding: 0 25px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    text-align: center;
}
.acal .head .dt {
    line-height: 44px;
    font-size: 18px;
}
.acal .head .day {
    width: 3.5em;
    line-height: 26px;
    border: 1px solid #f00;
    border-radius: 8px;
    margin-top: 8px;
}

.acal .week {
    position: fixed;
    left: 0;
    right: 0;
    top: 88px;
    z-index: 11;
    line-height: 32px;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.acal .week>i {
    width: 14.28%;
}

.acal .calbody {
    padding: 80px 0 200px 0;
    background-color: #f9f9f9;
}
.acal .month {
    position: relative;
}
.acal .month>h2 {
    text-align: center;
    line-height: 295px;
    font-size: 80px;
    color: #dedede;
    font-weight: normal;
}
.acal .month .days {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.acal .month .days>i {
    float: left;
    width: 59px;
    height: 39px;
    margin: 10px 0;
    text-align: center;
    font-size: 20px;
    position: relative;
}
.acal .month .days em {
    width: 39px;
    line-height: 39px;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 2;
}
.acal .month .days>i.disabled {
    color: #999;
}
.acal .month .days>i.hover {
    color: #fff;
}
.acal .month .days>i.hover>em {
    background-color: #f00;
}
.acal .month .days>i.hover::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    background-color: #FFD2CF;
}
.acal .month .days>i.start::before {
    left: 30px;
    right: 0;
}
.acal .month .days>i.end::before {
    left: 0;
    right: 30px;
}
.acal .month .days>i.active {
    background-color: #FFD2CF;
}

.acal .time {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 10;
    border-top: 1px solid #eee;
    background-color: #fff;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.2);
}
.acal .time .tit {
    float: left;
    font-size: 16px;
    width: 100px;
    text-indent: 14px;
    line-height: 56px;
}
.acal .time .slide {
    float: left;
    width: 300px;
    height: 2px;
    margin-top: 26px;
    background-color: #ddd;
}
.acal .time .value {
    float: left;
    height: 2px;
    background-color: #f00;
    position: relative;
}
.acal .time .value>em {
    position: absolute;
    right: -30px;
    top: -10px;
    line-height: 22px;
    padding: 0 6px;
    border: 1px solid #f00;
    background-color: #fff;
    border-radius: 20px;
}
 

日期模組：

/**
 * 日曆
 * @param {object} options 
 * @param {number} options.minday 最少提前幾天預定
 * @param {number} options.months 顯示幾個月
 * @param {date} options.start 預設開始時間
 * @param {date} options.end 預設結束時間
 * @param {function} options.callback 選擇時間後的回撥函式
 */
function Calendar(options) {
    this.options = options;
    this.options.daysel = '.acal .days>i';

    this.init();
}

Calendar.prototype.init = function () {
    var ins = this;
    if($('.acal').length==0){
        ins._createDOM();
        ins._bindEvent();
    }
    // 初始化日期-
    var start = ins.options.start;
    var m1 = $('.acal [data-m="{0}-{1}"]'.format(start.getFullYear(), start.getMonth()));
    var d1 = m1.next().find('[data-d="{0}"]'.format(start.getDate()));
    d1.trigger('click');
    
    var end = ins.options.end;
    var m2 = $('.acal [data-m="{0}-{1}"]'.format(end.getFullYear(), end.getMonth()));
    var d2 = m2.next().find('[data-d="{0}"]'.format(end.getDate()));
    d2.trigger('click');


    // 初始化時間-
    var arr = $('.acal .time em');
    var t1 = start.date(5).split(' ')[1];
    arr.eq(0).html(t1).parent().data('value', t1);
    var t2 = end.date(5).split(' ')[1];
    arr.eq(1).html(t1).parent().data('value', t2);

    var tt = [];
    for (var i = 0; i < 24; i++) {
        tt.push(i + ':00');
        tt.push(i + ':30');
    }
    new Slider({
        bar: $('.acal .slide').eq(0),
        btn: $('.acal .slide em').eq(0),
        data: tt,
        width: 300,
        callback: ins.setValue.bind(ins)
    }).init();
    new Slider({
        bar: $('.acal .slide').eq(1),
        btn: $('.acal .slide em').eq(1),
        data: tt,
        width: 300,
        callback: ins.setValue.bind(ins)
    }).init();
    
    ins.setValue();
};
Calendar.prototype.hide = function () {
    $('.acal').css('display', 'none');
}
Calendar.prototype.show = function () {
    $('.acal').css('display', 'block');
}

Calendar.prototype._bindEvent = function () {
    var ins = this;
    var options = this.options;
    $(options.daysel).on('click', function () {
        var $t = $(this);
        if ($t.hasClass('disabled')) return;

        var len = $(options.daysel + '.hover').length;
        $t.addClass('hover');
        if (len == 1) {
            ins._resetDate();
        } else if (len == 2) {
            $(options.daysel).removeClass('hover active start end');
            $t.addClass('hover');
        }
    });
    $('.acal .btn-red').on('click', function(){
        ins.hide();
        if(ins.options.callback){
            ins.options.callback(options.start, options.end);
        }
    });
}

Calendar.prototype._createDOM = function () {
    var ss = '<div class="acal" style="display:none;">' +
        '<div class="head"><i class="left dt"></i><i class="day"></i><i class="right dt"></i></div>' +
        '<div class="week"><i>日</i><i>一</i><i>二</i><i>三</i><i>四</i><i>五</i><i>六</i></div>' +
        '<div class="calbody"></div>' +
        // time start
        '<div class="time">' +
        '<div class="row clearfix">' +
        '<i class="tit">取車時間</i>' +
        '<div class="slide"><div class="value" data-value="10:00"><em>10:00</em></div></div>' +
        '</div>' +
        '<div class="row clearfix">' +
        '<i class="tit">還車時間</i>' +
        '<div class="slide"><div class="value" data-value="10:00"><em>10:00</em></div></div>' +
        '</div>' +
        '</div>' +
        // time end
        '<div class="footbar"><a class="btn-red">確認</a></div>' +
        '</div>';
    $('body').append(ss);
    this._createMonth();
}

Calendar.prototype._createMonth = function () {
    var options = this.options;
    var s0 = '<div class="month"><h2 data-m="{2}-{3}">{0}月</h2><div class="days">{1}</div></div>';
    var s1 = '<i data-d="{0}"><em>{0}</em></i>';
    var s2 = '<i class="disabled"><em>{0}</em></i>';
    var ss = '';
    var now = new Date();
    var arr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    for (var i = 0; i < options.months; i++) {
        var dt = new Date(now.getFullYear(), now.getMonth() + i, 1);
        let max = arr[dt.getMonth()];
        if (dt.getFullYear() % 4 == 0 && dt.getMonth() == 1) max += 1;
        var s = '',
            d0 = 0;
        // 從正確的周N開始-
        while (d0 < dt.getDay()) {
            s += s2.format('');
            d0++;
        }
        for (var d = 1; d <= max; d++) {
            var disabled = (i == 0) && (d < now.getDate() + options.minday);
            s += (disabled ? s2 : s1).format(d);
        }
        // 不足一個月補全-
        var d1 = 7 - (d0 + max) % 7;
        while (d1 > 0) {
            s += s2.format('');
            d1--;
        }
        ss += s0.format(dt.getMonth() + 1, s, dt.getFullYear(), dt.getMonth());
    }
    $('.calbody').html(ss);
}

Calendar.prototype._resetDate = function () {
    var arr = $(this.options.daysel + '.hover');
    var d1 = arr.eq(0).addClass('start');
    var d2 = arr.eq(1).addClass('end');

    var next = d1.next();
    while (!next.hasClass('end')) {
        next.addClass('active');
        next = next.next();
        if (next.length == 0) {
            next = d1.parent().parent().next().find('.days>i').eq(0);
        }
    }
    this.setValue();
}
// 將最終的日期set到頭部-
Calendar.prototype.setValue = function(){
    var options = this.options;
    var d1 = $(options.daysel + '.start');
    var d2 = $(options.daysel + '.end');

    var arr = $('.acal .time em');
    var t1 = arr.eq(0).html() || '10:00';
    var t2 = arr.eq(1).html() || '10:00';

    function getDT(d, t){
        var ym = d.parent().prev().data('m').split('-');
        var s = '{0}-{1}-{2} {3}'.format(ym[0], ym[1]-0+1, d.data('d'), t);
        return s.date(1);
    }
    options.start = getDT(d1, t1);
    options.end = getDT(d2, t2);

    $('.acal .head .dt').eq(0).html(options.start.date(4).replace('-','月').replace(' ','日 '));
    $('.acal .head .dt').eq(1).html(options.end.date(4).replace('-','月').replace(' ','日 '));
    
    $('.acal .head .day').html(av.days(options.start, options.end)+'天');
};
 

/**
 * 滑動模組
 * @param {object} options 
 * @param {jquery} options.bar 進度條
 * @param {jquery} options.btn 按鈕
 * @param {Array} options.data 進度條上的資料
 * @param {number} options.width 進度條寬度（可選）
 * @param {function} options.callback 選擇後的回撥
 */
function Slider(options) {
    this.options = options;
    this.init();
}

Slider.prototype.init = function () {
    var ins = this;
    if (ins.options.steps) {
        return; // 只init一次-
    }
    // 將整個bar分隔成N個寬度-
    var steps = [];
    var ww = ins.options.width || ins.options.bar[0].offsetWidth;
    var w = (ww - 20) / (ins.options.data.length - 1);
    $.each(ins.options.data, function (i, v) {
        steps[i] = w * i;
    });
    ins.options.steps = steps;

    var $v = ins.options.btn.parent();
    var val = $v.data('value');
    if (!val) {
        val = ins.options.data[0];
    }
    ins.setValue(val);
    $.each(ins.options.data, function (i, v) {
        if (val == v) {
            $v.width(ins.options.steps[i]);
        }
    });

    // 繫結btn事件-
    ins.bindEvent();
};
Slider.prototype.setValue = function (value) {
    this.options.btn.html(value).parent().data('value', value);
};
Slider.prototype.bindEvent = function () {
    var ins = this;
    var $b = ins.options.btn;
    var $v = $b.parent();
    var x0 = 0, // 滑鼠按下位置-
        x1 = 0, // 滑鼠移動過程的位置-
        w0 = 0; // 滑動前的value大小-

    $b.on('mousedown touchstart', function (event) {
        x0 = event.clientX || event.touches[0].clientX;
        w0 = $v.width();
        w2 = ins.options.width || ins.options.bar[0].offsetWidth;
    }).on('mousemove touchmove', function (event) {
        if (x0 == 0) return;
        x1 = event.clientX || event.touches[0].clientX;
        var w1 = w0 + x1 - x0;
        if (w1 > w2) return;
        $v.width(w1);
        var val = getNewValue(w1);
        if (val != $v.data('value')) {
            ins.setValue(val);
        }
    }).on('mouseup touchend', function (event) {
        x0 = x1 = 0;
        if(ins.options.callback){
            ins.options.callback();
        }
    });

    // 根據當前value寬度獲取對應的data-
    function getNewValue(w) {
        var max = 0;
        $.each(ins.options.steps, function (i, v) {
            if (w > v) max = i;
        });
        return ins.options.data[max];
    }
};
 

大家已經發現，該日曆元件主要用於移動端專案，但JavaScript程式碼其實不區分客戶端的，稍微修改CSS程式碼，一樣用於PC端裝置。

作者：朱會震