基于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,可以滑动切换.水平和垂直滚 ...
随机推荐
- 洛谷 P2580 于是他错误的点名开始了 题解
每日一题 day10 打卡 Analysis trie树模板题,只需用到简单的插入和查询就好了 如果想要学trie树,见信息学奥赛一本通·提高篇P82 #include<iostream> ...
- PostgreSQL10.5 - 创建索引的思考
总体感觉整个索引创建的比较慢,PostgreSQL10没有并行创建索引的功能,所以执行过程中,仅用到了服务器的一个核心来执行计算.索引创建是一个高CPU消耗的工作,CPU基本会跑满,会用到backen ...
- 自定义starter
https://github.com/deadzq/spring-boot-starter-hello 父子项目 子项目引用父项目中的依赖和配置参数
- linux系列（二十四）：du命令
1.命令格式 du [选项][文件] 2.命令功能 显示每个文件和目录的磁盘使用空间. 3.命令参数 -a或-all 显示目录中个别文件的大小. -b或-bytes 显示目录或文件大小时,以byte为 ...
- tornado解析post数据的问题
解析tornado查询参数: self.request.query_arguments self.get_query_argument[s](参数名称) 解析tornado的post参数: self. ...
- 【原创】go语言学习（十）Map类型
目录 声明和初始化 基本操作 map排序 map类型的切⽚片 课后作业 声明和初始化 1.map类型是⼀一个key-value的数据结构. //var a map[key的类型]value类型 var ...
- Scrapy不同的item指定不同的Pipeline
scrapy不同的item指定不同的Pipeline from items import AspiderItem, BspiderItem, CspiderItem class myspiderPip ...
- 编程微语 2019-Autumn
很多时候我们要的是[网页全屏],可是许多软件却做成了[浏览器全屏],不要一听到[全屏]就认为真的是传统意义上的全屏.拜托,老板(往往就是最大的产品经理).产品经理.程序员,想想,说清楚,做正确.某度文 ...
- ML_Review_PCA(Ch4)
Note sth about PCA(Principal Component Analysis) ML6月20日就要考试了,准备日更博客,来记录复习一下这次ML课所学习的一些方法. 博客是在参考老 ...
- D.Dwarf Tower
Vasya在玩一个叫做"Dwarf Tower"的游戏,这个游戏中有n个不同的物品, 它们的编号为1到n.现在Vasya想得到编号为1的物品. 获得一个物品有两种方式: 直接购买该 ...