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; }