基于Jquery ui 可复用的酒店 web页面选择入住日期插件
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery酒店预订日历代码</title>
<link rel="stylesheet" type="text/css" href="css/global.css"/>
<link rel="stylesheet" href="css/smoothness/jquery.ui.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body class="ticketBody">
<!--中间-->
<div class="webIndex">
<div class="stay-list clearFloat">
<div class="stay-list-left">
<h3 class="search-title">住宿预订</h3>
<form>
<div class="sea-div">
<label class="search-lab">目的地</label><input type="text" placeholder="景区或酒店名称" class="hotel-name" id="disHotel"/>
</div>
<div class="sea-div">
<label class="search-lab">入住日期</label><input type="text" readonly id="startDate"/>
</div>
<div class="sea-div">
<label class="search-lab">退房日期</label><input type="text" readonly id="endDate"/>
</div>
<div class="sea-div">
<label class="search-lab">入住日期</label><input type="text" readonly id="startDate11"/>
</div>
<div class="sea-div">
<label class="search-lab">退房日期</label><input type="text" readonly id="endDate11"/>
</div>
</form>
</div>
</div>
</div> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/stay.js"></script> </body>
</html>
//JS处理时间库
<script type="text/javascript" src="js/moment.min.js"></script>
主要js文件
<script type="text/javascript" src="js/stay.js"></script>
：
/*******住宿时间控件******/
(function($){
function stay (startEle,endEle){
this.start = $('#'+startEle);
this.end = $('#'+endEle);
this.today = new Date();
this.init();
} stay.prototype = {
constructor : stay,
init:function(){
this.inputVal();
this.endFun();
this.startFun();
},
startFun:function(){
var This = this;
This.start.datepicker({
dateFormat : 'yy-mm-dd',
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
altFormat : 'yy-mm-dd',
yearSuffix:'年',
showMonthAfterYear:true,
appendText : '明天',
firstDay : 1,
showOtherMonths:true,
minDate : 0,
maxDate:180,
onSelect:function(dateText,inst){
This.end.datepicker('option', 'minDate', new Date(moment(dateText).add('days', 1)));
This.end.datepicker('option', 'maxDate', new Date(moment(dateText).add('days', 180)));
var strDay = This.compare($(this));
This.start.datepicker('option', 'appendText', strDay);
if((new Date(This.end.val()) - new Date(dateText)) <= (24*60*60*1000)){
This.end.datepicker('option', 'appendText', This.compare(This.end));
}
} });
},
endFun:function(){
var This = this;
This.end.datepicker('refresh');
This.end.datepicker({
dateFormat : 'yy-mm-dd',
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
altFormat : 'yy-mm-dd',
yearSuffix:'年',
showMonthAfterYear:true,
appendText : '后天',
firstDay : 1,
showOtherMonths:true,
minDate : 1,
maxDate:180,
onSelect:function(){
This.end.datepicker('option', 'appendText', This.compare($(this)));
}
});
},
transformStr:function(day,strDay){
switch (day){
case 1:
strDay = '星期一';
break;
case 2:
strDay = '星期二';
break;
case 3:
strDay = '星期三';
break;
case 4:
strDay = '星期四';
break;
case 5:
strDay = '星期五';
break;
case 6:
strDay = '星期六';
break;
case 0:
strDay = '星期日';
break;
}
return strDay;
},
compare:function(obj){
var strDay = '今天';
var myDate = new Date(this.today.getFullYear(),this.today.getMonth(),this.today.getDate());
var day = (obj.datepicker('getDate') - myDate)/(24*60*60*1000);
day == 0 ? strDay: day == 1 ?
(strDay = '明天') : day == 2 ?
(strDay = '后天') : (strDay = this.transformStr(obj.datepicker('getDate').getDay(),strDay));
return strDay;
},
inputVal:function(){
this.inputTimes(this.start,1);
this.inputTimes(this.end,2);
},
inputTimes:function(obj,day){
var m = new Date(moment(this.today).add('days', day));
obj.val(m.getFullYear() + "-" + this.addZero((m.getMonth()+1)) + "-" + this.addZero(m.getDate()));
},
addZero:function(num){
num < 10 ? num = "0" + num : num ;
return num;
}
}
window.stay = stay; })(jQuery);
//调用1
var ss = new stay('startDate','endDate');
//调用2
var ss11 = new stay('startDate11','endDate11');
基于Jquery ui 可复用的酒店 web页面选择入住日期插件的更多相关文章
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- 基于jQuery UI的调色板插件推荐colorpicker
1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化 引入js文件 & ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 一款基于jquery ui漂亮的可拖动div实例
今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览 ...
- 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+
Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...
- Amaze UI 发布基于jQuery新版本v2.0.0之web组件
首先Amaze Ui第一版时我收到邮件邀请去试用,去了官网看了下,是基于zepto.js的一个类似bootstrap的响应式框架,提到框架当然是好事,快速开发呗.这词2.0的弃用zepto.js改用j ...
- 基于jquery ui修改的不依赖第三方的背景透明的弹出div
效果图: 代码: <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- Web页面使用VLC播放插件
一.原生态Demo下载 选择原因:我们为什么选择VLC播放插件?原因是它支持IE8浏览器播放视频,如果高版本的浏览器大可不必选择该插件,很多html5插件既好用又简单,但是有些交管或政府 部门还是限制 ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
随机推荐
- DIV半透明层
想使用DIV半透明层时 只需加一个filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5 0.5为半透明系数 使用前 使用后 style=& ...
- Linux gdb分析core dump文件
文章目录1. coredump1.1 coredump简介1.2 coredump的文件存储路径1.3 coredump产生的条件1.4 coredump产生原因2. 测试生成coredump1. c ...
- 5-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案升级篇(,远程升级GPRS内部程序)
https://www.cnblogs.com/yangfengwu/p/10410202.html 与升级WIFI相同介绍的不再叙述 先看WIFI升级的: ↑ 演示视频: https://www. ...
- 为什么深度（Ubuntu）Linux挂载NTFS分区只读不可写？
如前所述,经扩展,Dell Vostro 1520笔记本电脑拥有了两块硬盘. 本着旧物利用的心思,在其中一块256GiB固态盘上安装了深度linux,同时挂载另一块2TiB机械盘作为存储盘. 这块 ...
- TensorFlow(一)：准备
我的环境:win10+python3.6.4(64位) 一:安装python 根据自己的电脑下载python(32位或者64位)-->安装教程 安装好python后记得配置pip源,使用官方的源 ...
- Luogu5072 [Ynoi2015]盼君勿忘 【莫队】
题目描述:对于一个长度为\(n\)的序列,\(m\)次询问\(l,r,p\),计算\([l,r]\)的所有子序列的不同数之和\(\mathrm{mod} \ p\). 数据范围:\(n,m,a_i\l ...
- mac 安装rabbitmq出现的问题
一直提示这个文件权限问题. 然后试了各种办法.chown user:group / chmod 777 等等.都没有解决. 最后查到 chmod 666 /users/xxx/.erlang.cook ...
- ROS计算图级
上一节说到一个 package 可以包含多个可执行文件(节点),可执行文件需要被运行,就要了解ROS的通信架构,也就是计算图级,例: 小萝卜机器人拥有驱动系统,感知系统,控制系统等,要让它从指定位置到 ...
- TCP数据报结构以及三次握手
TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的.可靠的.基于字节流的通信协议,数据在传输前要建立连接,传输完毕后还要断开连接. 客户端在收发数据前要 ...
- Python测试框架对比
如有任何学习问题,可以添加作者微信:lockingfree 更多学习资料请加QQ群: 822601020获取 unittest, pytest, nose, robot framework对比 什么是 ...