提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
HTML5酒店入住日期选择日历插件
内容介绍用了HTML5和jquery技术来实现，曾用到了酒店入住日期的选择网页上面，你可继续优化功能，可拿去自己修改吧，测试请最好使用火狐或chrome等浏览器。
&!DOCTYPE HTML&
&html lang=&zh-CN&&
&title&tryMyOwnCalendar&/title&
&script src=&/jquery-1.8.3.min.js& type=&application/javascript& language=&javascript&&&/script&
*{ margin:0; padding:0;}
.choosecal{ width:96%; margin:3% overflow:}
.ccaltop{ width:99%; border-radius:5 border:1px solid #000;}
.caltline1,.caltline2{ width:94%; background-color:#F90; overflow: padding:2% 3%;}
.caltline1 p,.caltline2 p{ float: width:10%; font-weight:700; text-align:}
.caltline1 .bookdate{ width:90%; text-align:}
.caltline2{ background-color:#FFF; display:}
.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: display:}
.selectmouth{ background-color:#F30; width:94%; overflow:padding:2% 3%;border-radius:5px 5px 0 0;}
.selectmouth p{ float: width:33%; color:#FFF; font-weight:700; cursor:}
.selectmouth .selectdate{ width:100%; background-color:#F30; border: color:#FFF; font-weight:700; text-align:}
.data_table{ width:100%;border:1px solid #border-collapse: }
.data_table thead{ background-color:#333;}
.data_table thead td{ color:#FFF; text-align:border:1px solid #333;border-collapse: padding:1% 0;}
.data_table tbody td{border:1px solid #border-collapse: text-align:color:#0C6;padding:1% 0;}
.data_table tbody td.orderdate{ color:#000;}
.data_table tbody td.tdselect{ color:#background-color:#999}
&div class=&choosecal&&
&div class=&ccaltop&&
&div class=&caltline1&&
&p class=&bookdate&&选择入住日期……&/p&
&p&&img src=&images/iconpoint.png& /&&/p&
&div class=&caltline2&&
&p style=& width:80%; text-align:&&
&input type=&text& value=&& class=&datetext datetoday& readonly=readonly /&至
&input type=&text& value=&& class=&datetext dateendday& readonly=readonly /&
&p&&input type=&button& value=&确定& class=&btsure& /&&/p&
&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&
&table class=&data_table& cellspacing=&0px&&
&td&日&/td&&td&一&/td&&td&二&/td&&td&三&/td&&td&四&/td&&td&五&/td&&td&六&/td&
&td&1&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&
&td&1&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&
&td&1&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&
&td&1&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&
&td&1&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&
&td&1&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&&td&&/td&
window.onload=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= //标记日期
var indate=//入住日期
var inmonth= //入住月份
var outdate=thisday+1; //退房日期
var outmonth= //退房月份
var datetxt=&datetoday&;
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&);
jQuery(&.data_table tbody tr&).eq(j).find(&td&).eq(i).removeClass(&orderdate&);
jQuery(&.data_table tbody td&).removeClass(&orderdate&);
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){ //往日历中填入日期
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&);
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&);
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&);
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=
if(datetxt==&datetoday&){
jQuery(&.datetoday&).val(thisyear+&-&+thismonth+&-&+selectday);
jQuery(&.dateendday&).val(thisyear+&-&+thismonth+&-&+selectday);
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) / ());
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&);
本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
转载请注明（B5教程网）原文链接：：
网友评论：某天台历显示的是一周前的日期,翻到当天,所翻页日期加起来是168,问当天几号怎么算
168÷7＝2424＋3＋1＝28号
为什么这么算....
一周有7天，7是奇数，奇数个数的平均数是这几个数的中间数。所以，前一周的的中间数是24号，加上3就是这一周的最后一天的日期，再加上1就是当天的日期数。
为您推荐：
其他类似问题
168/7 = 24 当天为24+3 = 27 号
168除7=2424+3+1=28（号）答：当天28号望采纳
168/7得的是什么，为什么这么算，依据的什么
扫描下载二维码js获取某月的天数以及某天的前一个日期和后一天日期
js获取某月的天数以及某天的前一个日期和后一天日期
javascript
我勒个擦….看标题是不是快看晕了？。。。
首先一个函数：获取某月的天数
function DayNumOfMonth(Year, Month) {
return ((new Date(Year, Month, 0).getDate()));
使用方法：DayNumOfMonth(2016,1) 就是得到31
下面看下如何获取某日的前一天和后一天。
比如：得到需要直接得到2月1日、2月2日、2月3日。你是不是要说我有病啊，在day那天写个”+”、”-“不就ok了吗，非也！！！做事做不到完美，但需要完整。如果给你、、你还用老办法吗？
下面我贴出我写的一个初版的实现方法，当然了，没有优化哦，有需要请自助修改。
$scope.getDate = function (tag) {
var temp = $scope.todo.data.split('-');
if (temp.length != 3) {
return $scope.todo.
var year = temp[0];
var month = temp[1];
var day = temp[2];
switch (tag) {
if (day == DayNumOfMonth(year, month)) {
month = Number(month) + 1;
month = (month == 13) ? 1 :
day = Number(day) + 1;
if (day == 1) {
month = Number(month) - 1;
year = (month == 0) ? Number(year) - 1 :
month = (month == 0) ? 12 :
day = DayNumOfMonth(year, month);
day = Number(day) - 1;
return month + "月" + day + "日";
什么？看不懂scope.getDate？怎么调用？这个你不用管scope.getDate了,这个是angularJS里面的使用方式，你直接 var getDate = function(tag){…}就行了
怎么调用呢？
1、你需要有个全局变量 $scope.todo.data存储 ：类似的日期
可以这样存：
var today = ‘’;//一般这个是从其他页面传入的所以让你写成全局变量，并且是和angularJS配合使用的方法，所以也没有直接通过函数参数传入哦，你也别瞎疑虑我为啥不那样写，总是有原因的。
var date = today.length & 6 ? today : ‘’,
2、调用：getDate (0);//传入0得到当日、-1是前一天、1是后一天
我的热门文章
即使是一小步也想与你分享excel 公式 知道当前日期以及前期某天到当前日期的天数，如何计算前期的日期？用公式如何计算？_百度知道电脑日历怎么设置每周第一天是星期一?
作者：佚名
字体：[ ] 来源：互联网 时间：05-19 09:11:12
电脑上的日历很多人的习惯不一样，下面小编为大家分享电脑日历怎么设置每周第一天是星期一方法，有需要的朋友可以参考本文，希望能对大家有所帮助
我们平常看到的日历，都是星期日作为开始、星期六结束，对于有些人，为了便于安排一周内的加班等等，往往喜欢把周一作为开始，星期日作为结束，那么我们该怎么设置呢，下面小编就为大家详细一下，来看看吧！
点击电脑左下角的【开始】，找到【控制面板】，点击进入控制面板。
在控制面板里找到【时钟、语言和区域】点击进入它的设置页面
在【区域和语言】选项下找到【更改键盘或其他输入法】并且点击进去。
在【格式】菜单最下方有一个【其他设置(D)&&】，点击进入它的设置页面
在自定义格式菜单下选择【日期】，在下面找到【日历】的设置选项，【一周的第一天】有个下拉菜单，在这里就可以设置一周内以星期几为第一天了
设置完成之后，轻轻点击电脑右下角的时间，就会看到我们设置的一周是以星期几开始了
以上就是电脑日历怎么设置每周第一天是星期一方法介绍，操作很简单的，希望能对大家有所帮助！
大家感兴趣的内容
12345678910
最近更新的内容