基于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,可以滑动切换.水平和垂直滚 ...
随机推荐
- Mina整体体系结构分析
mina在应用程序中处于什么样的地位? mina屏蔽了一些网络通信细节对socket进行封装,并且基于NIO非阻塞框架,可以帮助我们快速开发网络通信,常常用于用户游戏开发,中间件等服务端应用程序.
- 心跳（纯代码制作心形，animation动画）
思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </ ...
- LibreOJ #6165. 一道水题
二次联通门 : LibreOJ #6165. 一道水题 /* LibreOJ #6165. 一道水题 欧拉线性筛 其实题意就是求区间[1, n]所有数的最小公倍数 那么答案就是所有质因子最大幂次的乘积 ...
- 永远不会被卡的Dinic
78,79行是精髓 61,148,149行是当前弧优化 #include <cstring> #include <cstdio> #include <queue> ...
- mutex,thread(c++11 windows linux三种方式)
一 c++11 windows linux三种方式 //#include <stdio.h> //#include <stdlib.h> //#include <uni ...
- mac 启动mysql
sudo /usr/local/mysql/support-files/mysql.server stop sudo /usr/local/mysql/support-files/mysql.serv ...
- [PKUSC2018]真实排名——线段树+组合数
题目链接: [PKUSC2018]真实排名 对于每个数$val$分两种情况讨论: 1.当$val$不翻倍时,那么可以翻倍的是权值比$\frac{val-1}{2}$小的和大于等于$val$的. 2.当 ...
- vue 路由传参的三种方法
API在这里 https://router.vuejs.org/guide/essentials/navigation.html 第一种传参 通过路由属性中的name来确定匹配的路由,通过param ...
- EXCEL公式中如何表示回车符？
问题: 将 id credttm cdno cdamt cashbrid cashrole note 转换为 "id credttm cdno cdamt cashbrid ca ...
- Docker学习知识图
这个图更能明白他们之间的关系 文章来源:外星人来地球 欢迎关注,有问题一起学习欢迎留言.评论