酒店移动端入住离店日期选择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整个目录是一个整体,最好不要破坏里面的目录结 ...
随机推荐
- Greenplum 调优--数据倾斜排查（一）
对于分布式数据库来说,QUERY的运行效率取决于最慢的那个节点. 当数据出现倾斜时,某些节点的运算量可能比其他节点大.除了带来运行慢的问题,还有其他的问题,例如导致OOM,或者DISK FULL等问题 ...
- learning scala Case Classses
package com.aura.scala.day01 object caseClasses { def main(args: Array[String]): Unit = { // 注意在实例化案 ...
- spring boot 对某个接口进行次数限制，防刷。简易版。demo。
一般的项目 如果没有做防刷 容易被人爆接口 或者就是说没有做token防刷过滤. 容易被人用正常的token刷接口.有些token非一次性. 用户登录之后生成token会有一个过期时间,但一般没有做频 ...
- 使用Ajax和一般处理程序实现文件上传与下载
1.使用HTML的input标签 <input type="file" multiple="multiple" id="file_load&qu ...
- vue怎么将一个组件引入另一个组件?
项目是由的vue-cli搭建 1.这里有两个组件,需求是把newComponents.vue里面的东西引入到helloWorld里面 2.index.js里面的配置 3.newComponents里面 ...
- SDK/JDK，Shell/Shell脚本，Apache/APR ,MTK
SDK 软件开发工具包(SoftwareDevelopmentKit) API(Application Programming Interface,应用编程接口)其实就是操作系统留给应用程序的一个调用 ...
- 线程池 | Java多线程，彻底搞懂线程池
熟悉Java多线程编程的同学都知道,当我们线程创建过多时,容易引发内存溢出,因此我们就有必要使用线程池的技术了. 最近看了一些相关文章,并亲自研究了一下源码,发现有些文章还是有些问题的,所以我也总结了 ...
- Matrix: 利用Matrix来设置ImageView的宽高,使图片能正常显示
在Android中加载ImageView一般都不会给ImageView的宽高设置一个确切的值,一般都是直接写成: <ImageView android:id="@+id/iv_test ...
- LoadRunne遇到的一些问题FAQ（持续更新...）
1.LR11破解完成,添加License失败,报错License security violation Loadrunner11破解成功后,用deletelicense.exe工具把License全删 ...
- leetcode 108. Convert Sorted Array to Binary Search Tree 、109. Convert Sorted List to Binary Search Tree
108. Convert Sorted Array to Binary Search Tree 这个题使用二分查找,主要要注意边界条件. 如果left > right,就返回NULL.每次更新的 ...