communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Un moyen simple d'implémenter un calendrier avec jQuery_jquery

Un moyen simple d'implémenter un calendrier avec jQuery_jquery

WBOY
Libérer： 2016-05-16 16:01:06
original
1374 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter simplement un calendrier avec jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Le principe est assez simple. Tout d'abord, calculez le nombre de jours dans un mois, puis calculez le jour de la semaine où se situe le premier jour du mois, puis triez-le dans l'ordre.

<!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>
Copier après la connexion

J'espère que cet article sera utile à la programmation jQuery de chacun.

Étiquettes associées：
jquery
source：php.cn
Article précédent：Méthode JS pour obtenir l'effet spécial de collision aléatoire de boules colorées_compétences javascript Article suivant：plug-in jquery jSignature implémente la signature_jquery manuelle
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
Depuis 2024-04-04 12:53:48
0
1
303
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal