jQuery簡(jiǎn)單實(shí)現(xiàn)日歷的方法
更新時(shí)間：2015年05月04日 15:51:05 投稿：shichen2014
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)日歷的方法,涉及jQuery操作日期的相關(guān)技巧,比較簡(jiǎn)單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了jQuery簡(jiǎn)單實(shí)現(xiàn)日歷的方法。分享給大家供大家參考。具體分析如下：
原理挺簡(jiǎn)單的，首先算出一個(gè)月有多少天，再算出這個(gè)月的第一天是星期幾，接著順序排下來(lái)就可以了.
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<meta name="format-detection" content="telephone=no" />
<title>tryMyOwnCalendar</title>
<script src="js/jquery.min.js" language="javascript"></script>
<style>
*{ margin:0; padding:0;}
.choosecal{ width:96%; margin:3% auto; overflow:hidden;}
.ccaltop{ width:100%; border-radius:5px; }
.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;}
.inputdate{ color:#F60;}
.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/next.png" /></p>
</div>
<div class="caltline2">
<p style=" width:80%; text-align:left;">
<input type="text" value=""
class="datetext datetoday inputdate" 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.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=thisday;
//標(biāo)記日期
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){
//能預(yù)訂的日期
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){
//標(biāo)記日期
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){
//算某個(gè)月的總天數(shù)
month=parseInt(month,10);
var d=new Date(year,month,0);
return d.getDate();
}
function getfirstday(year,month){
//算某個(gè)月的第一天是星期幾
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(){
//日期報(bào)錯(cuò)后，數(shù)據(jù)重置
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(){ //點(diǎn)擊日期的效果
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("日期填寫(xiě)錯(cuò)誤");
jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
errorreset();
}else if(outmonth==inmonth){
if(outdate<=indate){
alert("日期填寫(xiě)錯(cuò)誤");
jQuery(".datetoday").val(thisyear1+"-"+thismonth1+"-"+thisday1);
jQuery(".dateendday").val(thisyear1+"-"+thismonth1+"-"+(thisday1+1));
errorreset();
}
}
}
});
jQuery(".datetoday").click(function(){
//選擇入住日期
datetxt="datetoday";
jQuery(".datetext").removeClass("inputdate");
jQuery(this).addClass("inputdate");
});
jQuery(".dateendday").click(function(){
//選擇退房日期
datetxt="dateendday";
jQuery(".datetext").removeClass("inputdate");
jQuery(this).addClass("inputdate");
});
jQuery(".lastmonth").click(function(){
//上一個(gè)月
thismonth--;
if(thismonth==0){
thismonth=12;
thisyear--;
}
initdata();
});
jQuery(".nextmonth").click(function(){
//上一個(gè)月
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>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)日歷簽到功能
- jQuery EasyUI API 中文文檔 - Calendar日歷使用
- 為開(kāi)發(fā)者準(zhǔn)備的10款最好的jQuery日歷插件
- jQuery寫(xiě)的日歷(包括日歷的樣式及功能)
- jQuery 聯(lián)動(dòng)日歷實(shí)現(xiàn)代碼
- .net mvc頁(yè)面UI之Jquery博客日歷控件實(shí)現(xiàn)代碼
- php+mysql+jquery實(shí)現(xiàn)日歷簽到功能
- JQuery日歷插件My97DatePicker日期范圍限制
- Jquery日歷插件制作簡(jiǎn)單日歷
- 基于jquery實(shí)現(xiàn)日歷效果
相關(guān)文章
jQuery Validate表單驗(yàn)證插件的基本使用方法及功能拓展
這篇文章主要介紹了jQuery Validate表單驗(yàn)證插件的基本使用方法及功能拓展的相關(guān)資料,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2017-01-01
設(shè)置按鈕停頓3秒不可用的方法有很多，下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的2014-03-03
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之jQuery中的$的相關(guān)資料,需要的朋友可以參考下2015-01-01
jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法
這篇文章主要介紹了jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法,涉及jQuery針對(duì)頁(yè)面元素的操作技巧,需要的朋友可以參考下2015-06-06
根據(jù)Bootstrap Paginator改寫(xiě)的js分頁(yè)插件
本文主要對(duì)根據(jù)Bootstrap Paginator改寫(xiě)的js插件進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
Ben最近在負(fù)責(zé)一個(gè)購(gòu)書(shū)網(wǎng)站，在網(wǎng)站的首頁(yè)上，有一個(gè)叫做“最新上架”的板塊，板塊的內(nèi)容比較簡(jiǎn)單，只有書(shū)籍名稱(chēng)，作者姓名和上架時(shí)間（如圖），當(dāng)初設(shè)計(jì)的時(shí)候并i沒(méi)有過(guò)于豐富的構(gòu)思2010-10-10
jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問(wèn)題
本文主要介紹jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問(wèn)題，通過(guò)第三方的json2.js做到兼容，需要的朋友可以參考下。2016-05-05
jquery快捷動(dòng)態(tài)綁定鍵盤(pán)事件的操作函數(shù)代碼
動(dòng)態(tài)綁定鍵盤(pán)事件的方法或許會(huì)有很多，在本文將為大家介紹下jquery是如何快捷實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
在這節(jié)我們將使用validation插件實(shí)現(xiàn)注冊(cè)頁(yè)面的驗(yàn)證功能，通過(guò)這個(gè)例子，可以更全面的掌握該插件的使用功能2012-02-02
jquery綁定事件 bind和on的用法與區(qū)別分析
這篇文章主要介紹了jquery綁定事件 bind和on的用法與區(qū)別,結(jié)合實(shí)例形式分析了jquery綁定事件 bind和on的基本功能、用法、區(qū)別與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05