行程日历组件：选择开始和结束日期+滑动选择时间

前一篇文章刚给大家分享了滑动组件（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端设备。

作者：朱会震