酒店移动端入住离店日期选择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整个目录是一个整体,最好不要破坏里面的目录结 ...
随机推荐
- asp.net文件上传下载组件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- Maven项目打包时指定配置策略
以数据库连接池的配置文件(db.properties)为例,一般的项目会有开发用数据库,测试用数据库,正式环境数据库三种配置. 以前的做法是拷贝成三份,注释掉其他了两份 # 开发用 jdbc.url ...
- indexOf的用法
A.indexOf(B)="-1"表示的是不存在 不等于-1就表示存在 http://www.w3school.com.cn/jsref/jsref_indexOf.asp 没有出 ...
- ElasticSearch及其插件安装配置
elasticsearch安装使用 .安装步骤: 1.下载elasticsearch的rpm包: wget https://artifacts.elastic.co/downloads/elastic ...
- 学号 20175313 《Android程序设计》实验报告
目录 一.实验内容 (1)Android Stuidio的安装测试 (2)Activity测试 (3)UI测试 (4)布局测试 (5)事件处理测试 二.实验步骤 (1)Android Stuidio的 ...
- 20165223《网络对抗技术》Exp 8 Web基础
目录 -- Web基础 实践说明 实践目标 基础问答 实践内容 Web前端:HTML Web前端:JavaScript Web后端:MySQL Web后端:PHP SQL注入,XSS攻击测试 实验遇到 ...
- Maven中的SnapShot版本和Release版本
# Maven中的SnapShot版本和Release版本 ## 区别 - SnapShot 快照版本- Release 发布版本 ## 重要区别 - 本地获取这些依赖的机制不同,如果是快照版本,Ma ...
- osg fbx模型点击节点，对应节点染色
class CPickHandler :public osgGA::GUIEventHandler { public: CPickHandler(osgViewer::Viewer *viewer) ...
- 123457123456#0#-----com.twoapp.YiZhiFanPai08--前拼后广--儿童益智记忆翻牌jiemei
com.twoapp.YiZhiFanPai08--前拼后广--儿童益智记忆翻牌jiemei
- 123457---com.threeObj.Baobaoshizi01--- 宝宝识字01
com.threeObj.Baobaoshizi01--- 宝宝识字01