jquery酒店日期范围选择(手机端)

2817
<!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>