<!doctype html>
<html>
<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">-->
<!--<div>-->
<!--请选择入离日期-->
<!--<div>-->
<!--完成-->
<!--</div>-->
<!--</div>-->
<!--<div class="RangeDate_xinqi RangeDate_week">日</div>-->
<!--<div>一</div>-->
<!--<div>二</div>-->
<!--<div>三</div>-->
<!--<div>四</div>-->
<!--<div>五</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">'+
'<div>'+
'请选择入离日期'+
'<div>'+
'完成'+
'</div>'+
'</div>'+
'<div class="RangeDate_xinqi RangeDate_week">日</div>'+
'<div>一</div>'+
'<div>二</div>'+
'<div>三</div>'+
'<div>四</div>'+
'<div>五</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>
