左右滑动日期选择标签
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="date.css"/> </head> <body> <!--日期标签容器--> <div class="moment_container"> <!--日期部分开始--> <div class="date_box"> <div class="left"><</div> <div class="center"> <ul class="date"> </ul> </div> <div class="right">></div> </div> <!--日期部分结束--> </div> <!--jquery2.2.3版本--> <script src="jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script> <!--脚本--> <script type="text/javascript"> $(document).ready(function(){ /* * 日期js代码开始,做到自适应 */ // 初始化日期数据，当前日期为第一个显示，传入的是初始日期对象和结束日期对象，计算总共天数，为日期父级元素提供宽度，以下为数据示例只要是标准的日期对象都可以 var options = { currentDate: new Date(), // 当前日期 startDate: new Date('2017-02-01'), // 开始日期 endDate: new Date('2017-02-26'), // 结束日期 clash: [ // 时间地点同时冲突时用于判断日期中的红点显示 new Date('2017-02-08'), // 冲突的日期 new Date('2017-02-11'), new Date('2017-02-12'), new Date('2017-02-14'), ], clickCallback: function( backVal ){ // 日期点击回调，backVal为日期对象 } } dateInit(options); function dateInit( options ) { var dates = { currentDate: options.currentDate || new Date(), startDate: options.startDate || new Date('2017-02-01'), endDate: options.endDate || new Date('2017-02-26'), clash: options.clash || null, clickCallback : options.clickCallback || function ( backVal ) {}, } var picker = { // 获取某年某月某日为星期几 getWeek: function( year, month, day ){ var dayArray = ["周日","周一","周二","周三","周四","周五","周六"], newDate = new Date(year,month-1,day), newWeek = newDate.getDay(); return dayArray[newWeek]; }, getCenterContainerWidth: function(){ $('.date_box .center').width() }, init: function () { // dateNum为总共天数 var endMillSecond = Date.parse(dates.endDate); var startMillSecond = Date.parse(dates.startDate); var dateNum = Math.ceil((endMillSecond-startMillSecond)/86400000+1); var str = ''; var tempDate = new Date(); var num = 0; // 遍历日期 for(var i = 0; i < dateNum; i++) { var redCircle = ''; var temp = startMillSecond + (86400000*i); tempDate.setTime(temp); var year = tempDate.getFullYear(); var month = tempDate.getMonth()+1; var d = tempDate.getDate(); var week = this.getWeek(year,month,d); // 冲突时红点显示判断 if( dates.clash ){ for (var j = 0; j < dates.clash.length; j++) { if( dates.clash[j] - tempDate == 0 && !redCircle ){ redCircle = '<span class="red_circle"></span>'; } } } // 如果是当天时间 if( dates.currentDate.getFullYear() == year && dates.currentDate.getMonth() == (month-1) && dates.currentDate.getDate() == d ){ num = i; str += '<li class="item item_active" data-date="'+year+'-'+month+'-'+d+'">'+month+'月'+d+'日（'+week+'）'+redCircle+'</li>'; }else{ str += '<li class="item" data-date="'+year+'-'+month+'-'+d+'">'+month+'月'+d+'日（'+week+'）'+redCircle+'</li>'; } } $('.date_box .date').append(str); // li元素宽度 var liWidth = Math.ceil( $('.date_box .center').width() / 10 ); // 日期父级宽度 var parentWidth = dateNum * liWidth; $('.date_box .date').width(parentWidth); $('.date_box .center .item').width(liWidth-2); // 设置当前日期位置偏移 $('.date_box .date').css('left','-'+ (num*liWidth) +'px'); // 适应屏幕，计算日期容器center的宽度，计算li的宽度 $(window).on('resize',function(){ liWidth = Math.ceil( $('.date_box .center').width() / 10 ); parentWidth = dateNum * liWidth; $('.date_box .date').width(parentWidth); $('.date_box .center .item').width(liWidth-2); $('.date_box .date').css('left','-'+ (num*liWidth) +'px'); }) // 左点击操作 $('.date_box .left').on('click',function () { num --; if( num <= 0 ){ num = 0; } $('.date_box .date').css('left','-'+ (num*liWidth) +'px'); }) // 右点击操作 $('.date_box .right').on('click',function () { num ++; if( num >= (dateNum-10) ){ num = dateNum-10; } $('.date_box .date').css('left','-'+ (num*liWidth) +'px'); }) // 每项日期点击 $('.date_box .date .item').on('click',function () { $(this).addClass('item_active').siblings().removeClass('item_active'); var tempDate = new Date( $(this).data('date') ); dates.clickCallback( tempDate ); }) } } picker.init(); } }) </script> </body> </html>
css
html,body,ul,li,p{ padding:0; margin:0; } *{ box-sizing: border-box; font-size: 12px; } li{ list-style-type: none; } .moment_container{ padding:20px; width:100%; } /*日期样式*/ .date_box{ overflow: hidden; width:100%; height:32px; position: relative; } .date_box .left, .date_box .center, .date_box .right{ text-align: center; height:100%; line-height: 32px; cursor:pointer; cursor: hand; } .date_box .left{ float:left; } .date_box .right{ float:right; } .date_box .center{ /*width:1230px;*/ height:100%; overflow: hidden; position: absolute; top:0; bottom:0; left:33px; right:33px; } .date_box .date{ height:100%; position: absolute; left:0; top:0; } .date_box .date .item{ float:left; /*width:123px;*/ border:1px solid #ccc; height:100%; background: #ddd; position: relative; } .date_box .date .item .red_circle{ width:6px; height:6px; border-radius: 50%; background: red; position: absolute; top:6px; right:16px; } .date_box .date .item_active{ background: #008101; color:#fff; border:none; } .date_box .left, .date_box .right{ width:32px; } .date_box .left{ border:1px solid #ccc; margin-right:1px; background: #ddd; } .date_box .right{ border:1px solid #ccc; margin-left:1px; background: #ddd; }
