masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Cara mudah untuk melaksanakan kalendar dengan jQuery_jquery

Cara mudah untuk melaksanakan kalendar dengan jQuery_jquery

WBOY
Lepaskan： 2016-05-16 16:01:06
asal
1374 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara untuk melaksanakan kalendar dengan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Prinsipnya agak mudah, mula-mula, hitung berapa hari dalam sebulan, kemudian hitung hari dalam minggu apabila hari pertama bulan itu, dan kemudian susun mengikut urutan.

<!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; 
 //标记日期
 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(".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(){ 
 //上一个月
 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>
Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Label berkaitan：
jquery
sumber：php.cn
Artikel sebelumnya：Kaedah JS untuk mencapai kesan khas perlanggaran rawak kemahiran bola_javascript berwarna Artikel seterusnya：pemalam jquery jSignature melaksanakan signature_jquery manual
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Bagaimana untuk mendapatkan semula nilai baris yang tidak dipilih dalam jadual data HTML menggunakan jquery Saya cuba mendapatkan nilai semua baris di mana butang tidak diklik. Sebagai contoh, apabi...
daripada 2024-04-05 09:26:49
0
1
1418
Perlukan skrip jquery untuk mengalihkan pilihan yang dipilih dari kotak pilihan berdasarkan pemilihan semasa pengguna akhir Saya mempunyai halaman HTML di mana pengguna akhir boleh meletakkan kedudukan item kami me...
daripada 2024-04-04 18:40:04
0
1
3528
Saya telah mencipta elemen dalam CSS tulen melalui penanda halaman. Ia dicipta tetapi tidak kelihatan Kod saya adalah seperti berikut: g=document.createElement('div');g.setAttribute("id&q...
daripada 2024-04-04 17:27:27
0
1
417
Tidak dapat menghantar data borang pada iOS Safari/Firefox Ini berfungsi pada semua platform kecuali Safari/Firefox pada iOS: jQuery("#gform_1&q...
daripada 2024-04-04 12:53:48
0
1
303
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan