重写的HTML5酒店入住日期选择日历插件

最新推荐文章于 2022-06-21 16:19:53 发布
最新推荐文章于 2022-06-21 16:19:53 发布
阅读量665 收藏 2
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/youtianxia/p/3813046.html
版权

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>接触角测定仪</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="application/javascript" language="javascript"></script>
<style>
*{ margin:0; padding:0;}
.choosecal{ width:96%; margin:3% auto; overflow:hidden;}
.ccaltop{ width:99%; border-radius:5px; border:1px solid #000;}
.caltline1,.caltline2{ width:94%; background-color:#F90; overflow:hidden; padding:2% 3%;}
.caltline1 p,.caltline2 p{ float:left; width:10%; font-weight:700; text-align:right;}
.caltline1 .bookdate{ width:90%; text-align:left;}
.caltline2{ background-color:#FFF; display:none;}
.caltline2 p{ width:20%;}
.caltline2 .datetext{ width:35%; border:1px solid #000; background-color:#FFF; font-weight:700;}
.calender{ width:100%; margin-top:3%; overflow:hidden; display:none;}
.selectmouth{ background-color:#F30; width:94%; overflow:hidden;padding:2% 3%;border-radius:5px 5px 0 0;}
.selectmouth p{ float:left; width:33%; color:#FFF; font-weight:700; cursor:pointer;}
.selectmouth .selectdate{ width:100%; background-color:#F30; border:none; color:#FFF; font-weight:700; text-align:center;}
.data_table{ width:100%;border:1px solid #cccccc;border-collapse:collapse; }
.data_table thead{ background-color:#333;}
.data_table thead td{ color:#FFF; text-align:center;border:1px solid #333;border-collapse:collapse; padding:1% 0;}
.data_table tbody td{border:1px solid #cccccc;border-collapse:collapse; text-align:center;color:#0C6;padding:1% 0;}
.data_table tbody td.orderdate{ color:#000;}
.data_table tbody td.tdselect{ color:#fff;background-color:#999}
</style>
</head>
<body>
<div class="choosecal">
<div class="ccaltop">
<div class="caltline1">
<p class="bookdate">选择入住日期……</p>
<p><img src="images/iconpoint.png" /></p>
</div>
<div class="caltline2">
<p style=" width:80%; text-align:left;">
<input type="text" value="" class="datetext datetoday" readonly=readonly />至
<input type="text" value="" class="datetext dateendday" readonly=readonly />
</p>
<p><input type="button" value="确定" class="btsure" /></p>
</div>
</div>
<div class="calender">
<div class="selectmouth">
<p style="text-align:right" class="lastmonth"><</p>
<p><input type="text" class="selectdate" value="2014年2月" readonly=readonly /></p>
<p class="nextmonth">></p>
</div>
<table class="data_table" cellspacing="0px">
<thead>
<tr>
<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
window.οnlοad=function(){
var mydate=new Date();
var thisyear=mydate.getFullYear();
var thismonth=mydate.getMonth()+1;
var thisday=mydate.getDate();
var mydate1=new Date();
var thisyear1=mydate1.getFullYear();
var thismonth1=mydate1.getMonth()+1;
var thisday1=mydate1.getDate();
var selectday=thisday; //标记日期
var indate=thisday;//入住日期
var inmonth=thismonth; //入住月份
var outdate=thisday+1; //退房日期
var outmonth=thismonth; //退房月份
var datetxt="datetoday";
var datefirst;
var datesecond;
function initdata(){ //日期初始填充
var tdheight=jQuery(".data_table tbody tr").eq(0).find("td").height();
jQuery(".data_table tbody td").css("height",tdheight);
jQuery(".selectdate").val(thisyear+"年"+thismonth+"月");
var days=getdaysinonemonth(thisyear,thismonth);
var weekday=getfirstday(thisyear,thismonth);
setcalender(days,weekday);
markdate(thisyear,thismonth,selectday);
orderabledate(thisyear,thismonth,thisday);
}
initdata();
jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+thisday);
jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+(thisday+1));
function orderabledate(thisyear,thismonth,thisday){ //能预订的日期
if(thisyear<thisyear1){
jQuery(".data_table tbody td").addClass("orderdate");
jQuery(".data_table tbody td").removeClass("usedate");
}else if(thisyear==thisyear1){
if(thismonth<thismonth1){
jQuery(".data_table tbody td").addClass("orderdate");
jQuery(".data_table tbody td").removeClass("usedate");
}else if(thismonth==thismonth1){
for(var j=0;j<6;j++){
for(var i=0;i<7;i++){
var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
if(tdhtml<thisday){
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("orderdate");
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");
}else{
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("orderdate");
}
}
}
}else{
jQuery(".data_table tbody td").removeClass("orderdate");
}
}else{
jQuery(".data_table tbody td").removeClass("orderdate");
}
}
function markdate(thisyear,thismonth,thisday){ //标记日期
var datetxt=thisyear+"年"+thismonth+"月";
var thisdatetxt=thisyear1+"年"+thismonth1+"月";
jQuery(".data_table td").removeClass("tdselect");
if(datetxt==thisdatetxt){
for(var j=0;j<6;j++){
for(var i=0;i<7;i++){
var tdhtml=jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html();
if(tdhtml==thisday){
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("tdselect");
}
}
}
}
}
function getdaysinonemonth(year,month){ //算某个月的总天数
month=parseInt(month,10);
var d=new Date(year,month,0);
return d.getDate();
}
function getfirstday(year,month){ //算某个月的第一天是星期几
month=month-1;
var d=new Date(year,month,1);
return d.getDay();
}
function setcalender(days,weekday){ //往日历中填入日期
var a=1;
for(var j=0;j<6;j++){
for(var i=0;i<7;i++){
if(j==0&&i<weekday){
jQuery(".data_table tbody tr").eq(0).find("td").eq(i).html("");
jQuery(".data_table tbody tr").eq(0).find("td").eq(i).removeClass("usedate");
}else{
if(a<=days){
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html(a);
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).addClass("usedate");
a++;
}else{
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).html("");
jQuery(".data_table tbody tr").eq(j).find("td").eq(i).removeClass("usedate");
a=days+1;
}
}
}
}
}
function errorreset(){ //日期报错后，数据重置
thisyear=thisyear1;
thismonth=thismonth1;
thisday=thisday1;
selectday=thisday1;
indate=thisday1;
inmonth=thismonth1;
outdate=thisday1+1;
outmonth=thismonth1;
initdata();
}
jQuery(".data_table tbody td.usedate").live("click",function(){ //点击日期的效果
var thishtml=parseInt(jQuery(this).html());
jQuery(".data_table td").removeClass("tdselect");
jQuery(this).addClass("tdselect");
selectday=thishtml;
if(datetxt=="datetoday"){
jQuery(".datetoday").val(thisyear+"-"+thismonth+"-"+selectday);
indate=selectday;
inmonth=thismonth;
}else{
jQuery(".dateendday").val(thisyear+"-"+thismonth+"-"+selectday);
outdate=selectday;
outmonth=thismonth;
if(outmonth<inmonth){
alert("日期填写错误");
jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
errorreset();
}else if(outmonth==inmonth){
if(outdate<=indate){
alert("日期填写错误");
jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
errorreset();
}
}
}
});
jQuery(".datetoday").click(function(){ //选择入住日期
datetxt="datetoday";
});
jQuery(".dateendday").click(function(){ //选择退房日期
datetxt="dateendday";
});
jQuery(".lastmonth").click(function(){ //上一个月
thismonth--;
if(thismonth==0){
thismonth=12;
thisyear--;
}
initdata();
});
jQuery(".nextmonth").click(function(){ //上一个月
thismonth++;
if(thismonth==13){
thismonth=1;
thisyear++;
}
initdata();
});
jQuery(".btsure").click(function(){ //确定日期
var start = new Date($(".datetoday").val());
var end = new Date($(".dateendday").val());
var diff = parseInt((end - start) / (1000*3600*24));
jQuery(".bookdate").html(inmonth+"月"+indate+"日至"+outmonth+"月"+outdate+"日("+diff+")晚")
});
jQuery(".caltline1").toggle(
function(){
jQuery(".caltline2").slideDown(500);
jQuery(".calender").fadeIn(500);
errorreset();
jQuery(".caltline1").find("img").attr("src","images/iconpointup.png");
},
function(){
jQuery(".caltline2").slideUp(500);
jQuery(".calender").fadeOut(500);
jQuery(".caltline1").find("img").attr("src","images/iconpoint.png");
}
);
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/youtianxia/p/3813046.html

weixin_30256505
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
案例-做一个酒店预定小程序用的日期选择案例
逍遥生的博客
12-27 6730
做一个酒店预定用的日期选择案例 不多说，先上效果图 设计思路：根据年份和月份构建最近6个月的日历，获取每个月的第一天是星期几，空白用空对象填充，每个月需要的格子数 = 每月1号的星期数 + 每月对应的天数。在HTML中遍历日期数据，根据条件判断高亮显示入住时间、离店时间以及两者之间的时间。一下是全部代码(优化在最后). &amp;amp;amp;lt;!-- html代码 --&amp;amp;amp;gt; &amp;amp;amp;lt;view...
移动端仿美团酒店预订选择日期日历
weixin_36106791的博客
07-06 1207
一、HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery手机端仿美团酒店预订日期选择插件</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0
jquery 酒店入住离店日历插件(by Mk)
05-19
该插件适用于酒店等类型的网站开发入住，离店功能；可获取入住日期，离店日期，居住天数等，css，js均可二次开发。欢迎咨询建议~ （原理，功能很简单，但可以拿来即用）
酒店入住离店时间范围选择插件
09-12
酒店入住离店时间范围选择插件，酒店入住离店时间范围选择插件，酒店入住离店时间范围选择插件酒店入住离店时间范围选择插件
酒店入住离店js日历代码.zip
07-04
酒店入住离店js日历代码是一款支持单日历 双日历 三日历 限定范围天数等多种日历选择代码。
js日历控件-选择入住离开时间 super-calendar
Stavin Li的博客
07-24 1826
super-calendar 日历-选择入住离开时间 效果预览 在线预览 https://stavinli.github.io/super-calendar/index.html 开源地址 https://github.com/StavinLi/super-calendar.git 使用说明 1.引入文件css &amp;amp;lt;link rel=&amp;quot;stylesheet&amp;quot;...
酒店入住时间和离店时间的日期选择
LiXiao_Lan的博客
06-21 1936
选择入住时间和离店时间的日期
html日期输入代码是什么,HTML Input Datetime value用法及代码示例
weixin_26861329的博客
06-04 531
输入日期时间值属性用于设置或返回日期时间字段的value属性的值。输入日期时间值属性可用于为日期时间字段指定日期和时间。用法:要返回value属性：datetimeObject.value设置value属性：datetimeObject.value = YYYY-MM-DDThh:mm:ssTZD属性值：YYYY-MM-DDThh：mm：ssTZD：它用于指定日期和/或时间。YYYY：指定年份。M...
html页面酒店日历插件,基于vue2.x的酒店日历选择插件
weixin_42499041的博客
06-03 424
基于vue2.x的酒店日历选择插件效果图快速使用安装：npm install -S vue-hotel-calendar或者yarn add vue-hotel-calendar使用：import hotelCaldendar from 'vue-hotel-calendar'示例代码在移动端模式查看:value="dateRange"@click="showCalendar"readonlyty...
html5 酒店入住插件,jQuery酒店类入住日期时间范围选择器插件
weixin_39924486的博客
06-21 379
t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件。该jquery日期选择器提供多个配置参数和方法，可以创建响应式的、灵活的、多种主题效果的日期范围选择器。它的特点还有：内置10种主题效果。同一个页面可以生成多个日期选择器实例。可以自定义日期格式。提供大量有用的配置参数和API。适用于酒店类入住时间范围选择。使用方法在页面中引入下面的文件。HTML结构最简单的使用方法如下：...
html5酒店预订日期选择手机日历特效代码
03-20
html5酒店预订日期选择手机日历是一款基于jQuery+CSS3实现的手机移动端日历插件。
html5酒店预订日期选择手机日历.zip
07-05
html5酒店预订日期选择手机日历是一款基于jQuery CSS3实现的手机移动端日历插件。
html5的手机端酒店预订日期选择日历插件.zip
07-11
这是一款简单实用基于jQuery CSS3 html5实现的手机移动端入住日期和离店日期选择代码，手机端酒店预订日期选择日历插件。 js代码 [removed][removed] [removed] // var STATS_START_TIME = '4329148800'; var dateRange1 = new pickerDateRange('date1', { aRecent90Days : 'aRecent90Days', //最近90天 // isTodayValid : true, startDate: '2017-09-05', endDate: '2017-09-08', needCompare : false, defaultText : ' 离开 ', autoSubmit : false, inputTrigger : 'input_trigger1', theme : 'ta' }); [removed]
H5日期控件(酒店预定，两个日期选择)
07-13
类似于酒店预定的日期控件，支持两个日期选择，支持计算天数
js移动端酒店入住日期选择器
03-17
js移动端酒店入住日期选择器，拿来直接可以用，学习目的
h5日期输入框_使用HTML5日期输入
cungui5726的博客
08-22 1794
h5日期输入框Any online form that requires a scheduling, appointment or a booking function usually needs some kind of date picker. Traditionally this has been covered by JQuery or another JavaScript framewo...
H5日历插件
07-07
做过移动Web开发的同学都知道，移动端日期选择是很常见的需求。在PC端，我们有很丰富的选择，比较出名的就有Mobiscroll和jQuery UI Datepicker。个人看来，这些插件存在的两个显而易见的问题，第一是过重的依赖，对于jQuery的插件，已经强制依赖了80多k的庞然大物，把很多移动端项目拒之门外；第二是太过强大的功能，很多插件花百分之八十的时间去完善插件百分之二十炫酷的额外功能，导致代码量变大，配置繁杂。所以一款少依赖、轻量级和使用简单的移动端日期选择插件是非常必要的。本文简单介绍近来写的一款基于zepto的移动端轻量级日期插件--date_picker。
H5 日历插件
06-05
基于Java 的H5 日历插件源码，有阳历、农历、节气、节日，鼠标移入显示详细信息
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值