Itinerary Calendar component: Select Start and end date + sliding selection time

The previous article just shared the sliding component (http://blog.csdn.net/sq_zhuyi/article/details/79103683), and this article just took advantage of the sliding component, which implements the module of selecting time in the Calendar control. Again, in order to facilitate the problem, we first look at the effect chart:

This is a car rental project to choose the time and return time calendar, in fact, the same scene is used for many tourism projects, to choose Departure, return time.

On code, CSS module:

. 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. 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. D
    Ays>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; }

Date module:

/** * Calendar * @param {object} options * @param {number} Options.minday at least a few days ahead of schedule * @param {#} options.months display for several months
 * @param {date} options.start default start time * @param {date} options.end default End time * @param {function} Options.callback the callback function after the selection time
    */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 ();
    }//Initialization date-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 '); Initialization time-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 < 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, Widt
    
    h: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= "ri Ght DT "></i></div> ' + ' <div class=" Week "><i> Day </i><i> one </i><i> two &L T;/i><i> three </i><i> four </i><i> five </i><i> six </i></div> ' + ' <div class= ' calbody ' ></div> ' +//time start
        ' <div class= ' time ' > ' + ' <div class= ' row clearfix ' > ' + ' <i class= ' ' > Pick-up times </i> ' + ' <div class= ' slide ' ><div class= ' value ' data-value= ' 10:00 ' ><em>10:00</em></div></ Div> ' + ' </div> ' + ' <div class= ' row clearfix ' > ' + ' <i class= ' ' > Return car time </i& gt; ' + ' <div class= "slide" ><div class= "value" data-value= "10:00" ><em>10:00</em></div&gt ;</div> ' + ' </div> ' + ' </div> ' +//Time end ' <div class= ' Footbar '
    <a class= "btn-red" > Confirmation </a></div> ' </div> ';
    $ (' body '). Append (ss);
This._createmonth ();
    } calendar.prototype._createmonth = function () {var options = this.options; var s0 = ' <div class= ' month ' >
 

Time module:


/** * Sliding Module * @param {object} options * @param {jquery} options.bar progress bar * @param {jquery} options.btn button * @param {Ar Ray} options.data the data on the progress bar * @param {number} options.width progress bar width (optional) * @param {function} options.callback selection Callback * * * func
    tion Slider (options) {this.options = options;
This.init ();
    } Slider.prototype.init = function () {var ins = this;
    if (ins.options.steps) {return;//init only once-}//Divide the entire bar into n widths-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]);

   }
    }); Bind BTN Event-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,//mouse down position-X1 = 0,//position of mouse move process-w0 = 0; Value size before sliding-$b. On (' MouseDown touchstart ', function (event) {x0 = Event.clientx | | event.touches[0].clien
        TX;
        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 ();

    }
    });
        Gets the corresponding Data-function getnewvalue (w) {var max = 0 According to the current value width;
        $.each (ins.options.steps, function (i, v) {if (W > v) max = i;
        });
    return Ins.options.data[max]; }
};
 

 
It has been found that the calendar component is primarily used for mobile-side projects, but JavaScript code does not differentiate between clients, slightly modifying CSS code, as well as PC-side devices.



Author: Zhu Huazhen