原作者：http://blog.csdn.net/cj14227/article/details/65629737
效果图：
demo 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <!--<script src="RangeTime/jQueryTime/js/jquery.min.js"></script>--> <title>Document</title> <style> *{ padding: 0; margin: 0; } input{ border:none; width: 200px; } #RangeDate{ display: flex; flex-wrap: wrap; text-align: center; font-size: 14px; line-height: 50px; color: #333; position: fixed; bottom: 0; left: 0; width: 100%; overflow: hidden; } .RangeDate_xinqi{ width: 14%; height: 40px; line-height: 40px; color: #666; } .RangeDate_title{ height: 36px; line-height: 36px; font-size: 14px; color: #333; background: #fafafa; width: 100%; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .RangeDate_day{ height: 48px; width: 14%; position: relative; margin:1px 0; } .RangeDate_day:before{ content: ''; display: none; position: absolute; color: #fff; width: 0; height: 0; top: -6px; left: 30px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid rgba(0,0,0,0.7); } .RangeDate_promptSmall{ position: absolute; top: -26px; left: 5%; background: rgba(0,0,0,0.7); border-radius: 2px; color: #FFF; padding: 0 6px; line-height: 20px; font-size: 12px; white-space: nowrap; } .RangeDate_promptBig{ position: absolute; top: -26px; left: -40%; background: rgba(0,0,0,0.7); border-radius: 2px; color: #FFF; padding: 0 6px; line-height: 20px; font-size: 12px; white-space: nowrap; } .RangeDate_promptBigLeft{ position: absolute; top: -26px; left: 0; background: rgba(0,0,0,0.7); border-radius: 2px; color: #FFF; padding: 0 6px; line-height: 20px; font-size: 12px; white-space: nowrap; } .RangeDate_promptBigRight{ position: absolute; top: -26px; right: 0; background: rgba(0,0,0,0.7); border-radius: 2px; color: #FFF; padding: 0 6px; line-height: 20px; font-size: 12px; white-space: nowrap; } .RangeDate_dayShow:before{ display: block; } .RangeDate_dayStart:after{ content: '入住'; display: block; } .RangeDate_dayEnd:after{ content: '离店'; display: block; } .RangeDate_dayStart{ line-height: 24px; background: #2db6a6; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #fff; } .RangeDate_dayCenter{ background: #dff3f1; } .RangeDate_dayEnd{ line-height: 24px; background: #2db6a6; border-top-right-radius: 4px; border-bottom-right-radius: 4px; color: #fff; } .RangeDate_A1{ color: #a1a1a1; } .RangeDate_dayNo{ color:#a2a2a2; } .RangeDate_week{ color: #f9957b; } .RangeDate_head{ width: 100%; box-sizing: border-box; text-align: left; color: #666; font-size: 16px; padding-left: 20px; border-bottom: 1px solid #eee; } .RangeDate_done{ color: #27b4a4; float: right; height: 30px; line-height: 30px; border-radius: 4px; border: 1px solid #27b4a4; margin: 10px 20px; padding:0 10px; } #RangeDate_container{ display: flex; align-items: center; width: 100%; height:300px; overflow-y: scroll; overflow-x: hidden; flex-wrap: wrap; } .RangeDate_none{ display: none !important; } </style> </head> <body> <!--<div id="RangeDate" class="RangeDate_none">--> <!--<div class="RangeDate_head">--> <!--请选择入离日期--> <!--<div class="RangeDate_done">--> <!--完成--> <!--</div>--> <!--</div>--> <!--<div class="RangeDate_xinqi RangeDate_week">日</div>--> <!--<div class="RangeDate_xinqi">一</div>--> <!--<div class="RangeDate_xinqi">二</div>--> <!--<div class="RangeDate_xinqi">三</div>--> <!--<div class="RangeDate_xinqi">四</div>--> <!--<div class="RangeDate_xinqi">五</div>--> <!--<div class="RangeDate_xinqi RangeDate_week">六</div>--> <!--<div id="container"></div>--> <!--</div>--> <div> <input type="text" readonly id="test" value="点我试试看"> </div> </body> <script> window.RangeDate=function(RangeDateID){ $('body').append( '<div id="RangeDate" class="RangeDate_none">'+ '<div class="RangeDate_head">'+ '请选择入离日期'+ '<div class="RangeDate_done">'+ '完成'+ '</div>'+ '</div>'+ '<div class="RangeDate_xinqi RangeDate_week">日</div>'+ '<div class="RangeDate_xinqi">一</div>'+ '<div class="RangeDate_xinqi">二</div>'+ '<div class="RangeDate_xinqi">三</div>'+ '<div class="RangeDate_xinqi">四</div>'+ '<div class="RangeDate_xinqi">五</div>'+ '<div class="RangeDate_xinqi RangeDate_week">六</div>'+ '<div id="RangeDate_container"></div>'+ '</div>' ) var today=new Date(); var fu=document.querySelector('#RangeDate_container'); var startWeek=new Date(today.getFullYear(),today.getMonth(),1). getDay(); var dayNum=32-(new Date(today.getFullYear(),today.getMonth(),32).getDate()); var monthNum= 0,flag= 1,RangeDate_start=true,RangeDate_end=true,RangeDate_startId='',RangeDate_endId='',RangeDate_center=[]; var prompt=document.createElement('div'); $(prompt).addClass('RangeDate_prompt') function getDay(attr){ var monthTitle=document.createElement('div'); $(monthTitle).addClass('RangeDate_title'); monthTitle.innerHTML=new Date(today.getFullYear(),today.getMonth()+monthNum,1).getFullYear()+'年'+(new Date(today.getFullYear(),today.getMonth()+monthNum,1).getMonth()+1)+'月'; fu.appendChild(monthTitle); var firstDay=document.createElement('div'); $(firstDay).addClass('RangeDate_day'); $(firstDay).attr('id','RangeDate_'+flag); $(firstDay).attr('data-id',attr+'1'); flag++; firstDay.style.marginLeft=startWeek*14+"%"; firstDay.style.width='14%'; firstDay.innerHTML='1'; firstDay.onclick=function(){ RangeDateClick(this); } fu.appendChild(firstDay); for(var i=2;i<=dayNum;i++){ var j=document.createElement('div'); $(j).addClass('RangeDate_day'); $(j).attr('id','RangeDate_'+flag); flag++; j.innerHTML=i+''; $(j).attr('data-id',attr+i); j.onclick=function(){ RangeDateClick(this); } fu.appendChild(j) } monthNum++; startWeek=new Date(today.getFullYear(),today.getMonth()+monthNum,1).getDay(); dayNum=32-(new Date(today.getFullYear(),today.getMonth()+monthNum,32).getDate()); } function RangeDateClick(ele){ console.log($('#RangeDate_container').width()-$(ele).offset().left-$(ele).width()) if(RangeDate_start){ $(ele).addClass('RangeDate_dayStart'); $(ele).addClass('RangeDate_dayShow'); RangeDate_start=false; RangeDate_startId=$(ele).attr('id'); $(prompt).removeClass(); if($(ele).offset().left<=10){ $(prompt).addClass('RangeDate_promptBigLeft') }else if($('#RangeDate_container').width()-$(ele).offset().left-$(ele).width()<=10){ $(prompt).addClass('RangeDate_promptBigRight') }else { $(prompt).addClass('RangeDate_promptBig') } $(ele)[0].appendChild(prompt); prompt.innerHTML='请选择离店时间'; return; } if(RangeDate_end){ if($(ele).attr('id').split('_')[1]*1>$('#'+RangeDate_startId).attr('id').split('_')[1]*1){ $(prompt).removeClass(); $('#'+RangeDate_startId).removeClass('RangeDate_dayShow'); $(ele).addClass('RangeDate_dayEnd'); RangeDate_end=false; RangeDate_endId=$(ele).attr('id'); $('#'+RangeDate_endId).addClass('RangeDate_dayShow'); $(prompt).addClass('RangeDate_promptSmall'); $('#'+RangeDate_endId)[0].appendChild(prompt); prompt.innerHTML='共 '+(RangeDate_endId.split('_')[1]-RangeDate_startId.split('_')[1])+' 晚'; }else if($(ele).attr('id').split('_')[1]<$('#'+RangeDate_startId).attr('id').split('_')[1]){ $(prompt).removeClass(); $('#'+RangeDate_startId).removeClass('RangeDate_dayShow'); $('#'+RangeDate_startId).removeClass('RangeDate_dayStart'); $('#'+RangeDate_startId).addClass('RangeDate_dayEnd'); RangeDate_endId=$('#'+RangeDate_startId).attr('id'); $(ele).addClass('RangeDate_dayStart'); RangeDate_startId=$(ele).attr('id'); $('#'+RangeDate_endId).addClass('RangeDate_dayShow'); $(prompt).addClass('RangeDate_promptSmall'); $('#'+RangeDate_endId)[0].appendChild(prompt); prompt.innerHTML='共 '+(RangeDate_endId.split('_')[1]-RangeDate_startId.split('_')[1])+' 晚'; RangeDate_end=false; }else { return; } if(RangeDate_center.length>0){ for(var i=0;i<RangeDate_center.length;i++){ $('#RangeDate_'+RangeDate_center[i]).removeClass('RangeDate_dayCenter'); } RangeDate_center=[]; } for(var i=RangeDate_startId.split('_')[1]*1+1;i<RangeDate_endId.split('_')[1]*1;i++){ $('#RangeDate_'+i).addClass('RangeDate_dayCenter'); RangeDate_center.push(i) } return; } if(!RangeDate_start && !RangeDate_end){ $('#'+RangeDate_startId).removeClass('RangeDate_dayStart'); $('#'+RangeDate_endId).removeClass('RangeDate_dayEnd'); $('#'+RangeDate_endId).removeClass('RangeDate_dayShow'); $('#'+RangeDate_endId)[0].removeChild(prompt); $(ele).addClass('RangeDate_dayStart'); $(ele).addClass('RangeDate_dayShow'); $(prompt).removeClass(); if($(ele).offset().left<=10){ $(prompt).addClass('RangeDate_promptBigLeft') }else if($('#RangeDate_container').width()-$(ele).offset().left-$(ele).width()<=10){ $(prompt).addClass('RangeDate_promptBigRight') }else { $(prompt).addClass('RangeDate_promptBig') } $(ele)[0].appendChild(prompt); prompt.innerHTML='请选择离店时间'; RangeDate_startId=$(ele).attr('id'); RangeDate_end=true; if(RangeDate_center.length>0){ for(var i=0;i<RangeDate_center.length;i++){ $('#RangeDate_'+RangeDate_center[i]).removeClass('RangeDate_dayCenter'); } RangeDate_center=[]; } } } getDay(new Date(today.getFullYear(),today.getMonth()+1,1).getFullYear()+'-'+new Date(today.getFullYear(),today.getMonth()+1,1).getMonth()+'-'); getDay(new Date(today.getFullYear(),today.getMonth()+2,1).getFullYear()+'-'+new Date(today.getFullYear(),today.getMonth()+2,1).getMonth()+'-'); getDay(new Date(today.getFullYear(),today.getMonth()+3,1).getFullYear()+'-'+new Date(today.getFullYear(),today.getMonth()+3,1).getMonth()+'-'); getDay(new Date(today.getFullYear(),today.getMonth()+4,1).getFullYear()+'-'+new Date(today.getFullYear(),today.getMonth()+4,1).getMonth()+'-'); $('#RangeDate_'+new Date().getDate()).html('今天'); RangeDateClick($('#RangeDate_'+new Date().getDate())); RangeDateClick($('#RangeDate_'+($('#RangeDate_'+new Date().getDate()).attr('id').split('_')[1]*1+1))); for(var i=new Date().getDate()-1;i>0;i--){ $('#RangeDate_'+i).addClass('RangeDate_dayNo'); $('#RangeDate_'+i)[0].onclick=null; } $('#'+RangeDateID).bind('click',function(){ $('#RangeDate').toggleClass('RangeDate_none'); }); $('.RangeDate_done').bind('click',function(){ console.log(RangeDate_start) console.log(RangeDate_end) if(!RangeDate_start && !RangeDate_end){ $('#RangeDate').addClass('RangeDate_none'); $('#'+RangeDateID).val($('#'+RangeDate_startId).attr('data-id')+' 至 '+$('#'+RangeDate_endId).attr('data-id')+' 共'+(RangeDate_endId.split('_')[1]*1-RangeDate_startId.split('_')[1]*1)+'晚') } }) } RangeDate('test') </script> </html>