酒店移动端入住离店日期选择demo(转)

原作者：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>

酒店移动端入住离店日期选择demo(转)的更多相关文章

【转载】jQuery手机移动端触屏日历日期选择
文章转载自科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
Android项目实战（二十九）：酒店预定日期选择
先看需求效果图: 几个需求点: 1.显示当月以及下个月的日历 (可自行拓展更多月份) 2.首次点击选择"开始日期",再次点击选择"结束日期" (1).如果&qu ...
jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
移动端iscroll实现日期选择
哎,说多了都是泪: 引入相关JS文件 <script type="text/javascript" src="js/jquery-1.9.1.min.js" ...
用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
webapp中的日期选择
你是否在开发webapp时,选择用哪种第三方日期选择控件绞尽脑汁? 其实不用那么麻烦,现在移动端都是WebKit内核,支持HTML5,其实只要弱弱的将input中将type="date&qu ...
移动设备日期选择插件（基于JQUERY）
上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...
推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)
1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

随机推荐

luogu 3919
主席树 #include <iostream> #include <cstdio> #include <algorithm> #include <cmath& ...
Codeforces Round #574 (Div. 2)
目录 Contest Info Solutions A. Drinks Choosing B. Sport Mafia C. Basketball Exercise D1. Submarine in ...
OS创建页目录和页
;开始创建页目录项(PDE) .create_pde: ; 创建Page Directory Entry mov eax, PAGE_DIR_TABLE_POS ; PAGE_DIR_TABLE_PO ...
visual studio code(vs code) 编译、运行、调试程序（调用g++）
g++的安装过程忽略,记不清有没有"安装路径不能有空格"这种问题. 网上翻了几个博客,找到的配置文件在g++下都不能运行,遂折腾. 安装vscode与插件插件为ms-vscode ...
Java+Bigdata学习路线
Java+Bigdata学习路线 2019-05-28 07:04:33 @Auther:MrZhangxd STAGE 第一阶段:JAVA基础 |-第一阶段:JAVA基础 | |-可掌握的核心能力 ...
JAVA基础知识|Serializable
一.序列化和反序列化序列化:把对象转换为字节序列的过程称为对象的序列化. 反序列化:把字节序列恢复为对象的过程称为对象的反序列化. 将内存中对象的信息保存下来,可以有很多种方式实现这一功能.其中ja ...
Multiple commands produce "*.framework"
参考链接记录个问题,这是xcode10后新build系统导致的,新系统帮我们检查了很多东西,最优化我们的构建, 两种方案 1.用旧的系统(不推荐) 2.这个是build setting->b ...
Spring MVC 三大组件
㈠ HandlerMapping 处理器映射(一般通过扫描包配置) 通过处理器映射,你可以将Web 请求映射到正确的处理器 Controller 上.当接收到请求时,DispactherServlet ...
ArcGIS10.3_解决属性表中文乱码问题
借鉴前辈们解决ArcMap低版本属性表乱码的问题解决方法,勇敢的尝试了一下Pro中的解决方法,其实道理都一样.先来看看第一种方法:打开CMD,如果是ArcMap,输入如下命令: reg add HKE ...
mysql中的sql-mode导致的datetime类型字段不能为0000
问题描述: 在执行建表语句的时候,出现invalid default datetime value '0000-00-00 00:00:00',从字面意思看,就是不合法的默认值'0000-00-00 ...

酒店移动端入住离店日期选择demo(转)

酒店移动端入住离店日期选择demo(转)的更多相关文章

随机推荐

热门专题