基于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,可以滑动切换.水平和垂直滚 ...
随机推荐
- asp.net文件夹上传源码
ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...
- link cut tree 洞穴勘测
/*[bzoj2049][Sdoi2008]Cave 洞穴勘测 2014年7月30日1,06923Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区 . ...
- ICPC 2019-2020 North-Western Russia Regional Contest
目录 Contest Info Solutions Problem A. Accurate Movement Problem B. Bad Treap Problem E. Equidistant P ...
- [TJOI2013]松鼠聚会 曼哈顿距离
[TJOI2013]松鼠聚会 luogu P3964 首先容易得到两点间距离是\(max(|x_1-x_2|, |y_1-y_2|)\)(即切比雪夫距离) 然后有个套路:原\((x,y)\)求曼哈顿距 ...
- Unity 与 Android 互调用
https://www.jianshu.com/p/b5e3cfcdf081 Unity 项目中一些需要访问安卓操作系统的功能,比如获取电量,wifi 状态等,需要 Unity 启动安卓系统的 Bro ...
- 用Python实现自己下载音乐的统计
今天看Python实例,学习了如何对文件进行操作,突然想把自己网易云音乐下载到本地的歌曲名单写到一个txt中,看看具体情况.当然,我现在肯定无法做到直接去网易云音乐上爬取,就做个最简单的吧,嘻嘻^-^ ...
- Linux网络编程四、UDP，广播和组播
一.UDP UDP:是一个支持无连接的传输协议,全称是用户数据包协议(User Datagram Protocol).UDP协议无需像TCP一样要建立连接后才能发送封装的IP数据报,也是因此UDP相较 ...
- Git 工作流
一.分类 1.集中式工作流 像 SVN 一样,集中式工作流以中央仓库作为项目所有修改的单点实体.所有修改都提交到 Master 这个分支上. 这种方式与 SVN 的主要区别就是开发人员有本地库.Git ...
- pl/sql test Window 参数为date
好久没写笔记了,感觉颓废了,原因是工作忙,休息时间人也变懒了,好了不说了:今天需要记录一下plsql打开测试窗口测试存储过程时,入参为date格式时报的异常 本以为和sql一样处理就可以,但是报异常, ...
- Django 测试开发2
1.get方法和post方法 get方法 post方法 直接把method修改成post,报错如下,Django针对CSRF的保护措施是在生成的每个表单放置一个自动生成的令牌,通过这个令牌判断POS ...