酒店移动端入住离店日期选择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整个目录是一个整体,最好不要破坏里面的目录结 ...
随机推荐
- 011——C#创建ecxel文件（附教程）
(一)参考文献:[C#]创建表格(.xlsx)的典型方法 (二)视频教程:https://v.qq.com/x/page/t30068qfex5.html (三)下载地址:https://downlo ...
- PostgreSQL 使用PG_Rman进行物理备份
背景 在Oracle下我们可以使用rman进行物理备份,支持数据库的全量.增量.归档的备份模式而PostgreSQL作为开源数据库,近些时间来也一直向商业版数据库看齐,也推出了开源功工具pg_rman ...
- MongoDB空间分配
Mongodb占据的磁盘空间比MySQL大得多,可以理解文档数据如Json这种格式,存在许多冗余数据,但空间占用大得不正常,甚至是传统数据库的三四倍,不太契合工程实践,应该有改善的余地. 查阅了一些资 ...
- css3 2D变形（transform）移动、缩放、旋转、倾斜
一. translate(x,y) 或者translateX(x)或者translateY(y) 注意点:translateX(x)和translateY(y)大写X和Y:只写一个值,默认y=0. & ...
- ROS模拟
亲测,在古月大大这篇博客中的一条命令最好改为rostopic pub /cmd_vel geometry/Twist -r 10 -- '[0.2,0,0]' '[0,0,0.5]'. http:// ...
- 使用MockMVC与Junit进行单体测试
1.pom.xml追加 junit spring-test 2.测试共通类 @ContextConfiguration(locations = { "classpath:springfram ...
- netcore 发布到IIS上常见错误
1 出现AspNetCoreModuleV2错误 报错原因: 你的IIS服务器上的.net core 运行时不是最新的,导致AspNetCoreModuleV2模块缺失或者报错,意思需要你更新了! 2 ...
- 关于long_query_time的设置，可不可以说是mysql的一个小小bug呢
我们知道对对于MySQL的日志功能,我们可以完全自己控制到底写还是不写.一般来说,binlog我们一般会开启,而对于慢查询我们一般会在开发的时候调试和观察SQL语句的执行速度.但今天发现一个问题.在使 ...
- git submodule 如何push代码
某git项目关联了一个submodule 如何更新该项目下的submodule https://stackoverflow.com/questions/5814319/git-submodule-pu ...
- bs4 string与text的区别
用python写爬虫时,BeautifulSoup真是解析html,快速获取所需数据的神器. 这个美味汤使唤起来,屡试不爽. 在用find()方法找到特定的tag后,想获取里面的文本,可以用.text ...