酒店移动端入住离店日期选择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整个目录是一个整体,最好不要破坏里面的目录结 ...
随机推荐
- ueditor从word粘贴公式
官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...
- [English] - 单词阶段1
百词斩这个app很好玩,尤其是在记忆单词的时候,效果显著. 有的PK赛场也是比较谁的单词翻译提交的快,这个我曾经连胜好几次.
- NetworkX系列教程(4)-设置graph的信息
小书匠Graph图论 要画出美观的graph,需要对graph里面的节点,边,节点的布局都要进行设置,具体可以看官方文档:Adding attributes to graphs, nodes, and ...
- 贾扬清牛人（zz）
贾扬清加入阿里巴巴后,能否诞生出他的第三个世界级杰作? 文 / 华商韬略 张凌云 本文转载,著作权归原作者所有 贾扬清加入阿里巴巴后,能否诞生出他的第三个世界级杰作? 2017年1月11日,美国 ...
- Linux Soft-RoCE implementation （zz）
Linux Soft-RoCE implementation 首页分类标签留言关于订阅2017-11-08 | 分类 Network | 标签 RDMA RoCE Linux-RDMA 内核在4 ...
- python去掉字符串中重复字符的方法
If order does not matter, you can use foo = "mppmt" "".join(set(foo)) set() ...
- 【原创】go语言之打印目录
package main import ( "fmt" "io/ioutil" "log" ) func listFiles(dirname ...
- vue中引入Tinymce富文本编辑器
最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...
- class的三元表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 为什么HashMap桶(链表)的长度超过8才会转换成红黑树
百度了一下,感觉能说清楚的并不多,所以在此记录一下. 首先说一说转换为红黑树的必要性:红黑树的插入.删除和遍历的最坏时间复杂度都是log(n),因此,意外的情况或者恶意使用下导致hashCode()方 ...