un p'tit calendrier js perpétuel(mais pas universel)
Posté : 26 juin 2005, 14:20
salut,
comme je cherchais sur le net un calendrier en js sous forme de popup pour saisir des dates et que rien ne me convenait je m'en suis fait un et je le file ici.
il y a aussi une feuille de style pour modifier facilement les couleurs.
il a été testé avec ie6/ff sous window/linux et les dates sont valables de 1583 à 275760(fallait que je sache :) )
pour ceux qui seraient interessés, s'ils peuvent me filer des retours sur la compatibilité avec d'autres navigateurs, problèmes...
la page qui appelle le calendrier:
le calendrier(kaland.htm dans l'exemple)
comme je cherchais sur le net un calendrier en js sous forme de popup pour saisir des dates et que rien ne me convenait je m'en suis fait un et je le file ici.
il y a aussi une feuille de style pour modifier facilement les couleurs.
il a été testé avec ie6/ff sous window/linux et les dates sont valables de 1583 à 275760(fallait que je sache :) )
pour ceux qui seraient interessés, s'ils peuvent me filer des retours sur la compatibilité avec d'autres navigateurs, problèmes...
la page qui appelle le calendrier:
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
function calend(idcontrol)
{
document.getElementById('stok').value=idcontrol;
window.open('kland.htm','kland','width=320,height=205');
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<input type="text" id="dt" readonly="true"><a href="javascript:calend('dt')">Calend</a>
<input type="text" id="dtdeux" readonly="true"><a href="javascript:calend('dtdeux')">Calend</a>
<input type="hidden" id="stok">
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>KLand</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="javascript">
//valable de 1583 a 275760(ie6,ff window/linux)
//verifie si la liste des annees correspont a la date en cours afin de pouvoir continuer a afficher
//la date du jour au demarrage(un peu inutile mais bon... :) )
function verif()
{
dt=new Date();
an=dt.getFullYear();
if(an>document.getElementById('annee').options[9])
{
for(i=0;i<10;i++)
{
document.getElementById('annee').options[i].text=parseInt(document.getElementById('annee').options[i].text)+10;
}
}
init();
}
//charge la date du jour au demarrage
function init()
{
dtj=new Date();
an=dtj.getFullYear();
an=new String(an);
//trouve la position dans la liste annee pour un nombre d'annee < 275760
position=an.substr((an.length-1),1);
document.getElementById('annee').options[position].selected=true;
//selectionne le mois en cours dans la liste
document.getElementById('mois').options[dtj.getMonth()].selected=true;
//met le jour de cote pour geredate() en vu de l'afficher
intjour=dtj.getDate();
//reformate la date pour qu'elle soit utilisable par geredate
dt=new Date(an,dtj.getMonth(),1);
geredate(dt,intjour);
}
//charge la date choisi
function trouvedt()
{
dtj=new Date();
dt=new Date(document.getElementById('annee').options[document.getElementById('annee').selectedIndex].text, document.getElementById('mois').options[document.getElementById('mois').selectedIndex].value,1);
//verifie si le mois et l'annee selectionne ne correspondent pas a ceux en cours
if(dtj.getYear()==dt.getYear() && dtj.getMonth()==dt.getMonth())
{
geredate(dt,dtj.getDate());
}
else
{
//remet les couleurs d'origines
for(i=1;i<43;i++)
{
document.getElementById('j_'+i).color="";
}
geredate(dt,0);
}
}
//gere l'affichage des jours
function geredate(dt,intjour)
{
document.getElementById('j_28').di='color:green';
//le dimanche est egal a zero en js
//trouve le premier jour du mois
if(dt.getDay()) jourinit=dt.getDay(); else jourinit=7;
nbj=nbjour()+jourinit;
//stock dans un champs hidden la valeur de jourinit pour pouvoir envoyer plus tard le bon jour
//a la fenetre qui a appele le popup
document.getElementById('jinit').value=(jourinit-1);
//vide les premieres cellules
for(i=1;i<jourinit;i++)
{
document.getElementById('j_' +i).innerHTML="";
}
//remplis les cellules avec le jour
for(i=jourinit,j=1;i<nbj;i++,j++)
{
document.getElementById('j_' +i).innerHTML=j;
}
//vide les dernieres cellules
for(i=nbj;i<43;i++)
{
document.getElementById('j_' +i).innerHTML="";
}
//c'est ici que se choisi l'effet sur le jour en cours
//seules les proprietes de la balise font sont a utiliser, pas de style
if(intjour) document.getElementById('j_' + (intjour+jourinit-1)).color='yellow';
}
//trouve le nombre de jours d'apres un mois
function nbjour()
{
switch(document.getElementById('mois').options[document.getElementById('mois').selectedIndex].value)
{
case '0':case '2':case '4':case '6':case '7':case '9': case '11':
return 31;
case '3':case '5':case '8':case '10':
return 30;
//mois de fevrier
case '1':
if(tbi(document.getElementById('annee').options[document.getElementById('annee').selectedIndex].text)) return 29; else return 28;
}
}
//verifie si une annee est bissextile
function tbi(annee)
{
if (annee%4==0 && annee %100!=0 || annee%400==0) return true; else return false
}
//augmente de 10 ans la liste annee
function augmente()
{
for(i=0;i<10;i++)
{
document.getElementById('annee').options[i].text=parseInt(document.getElementById('annee').options[i].text)+10;
}
document.getElementById('annee').options[0].selected=true;
trouvedt();
}
//diminue de 10 ans la liste annee
function diminue()
{
if(document.getElementById('annee').options[0].text==1590)
{
alert("Les dates inf\u00e9rieur \u00e0 1582 ne seront pas valables");
window.open("http://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien");
}
else if(document.getElementById('annee').options[0].text==1580) return;
for(i=0;i<10;i++)
{
num=document.getElementById('annee').options[i].text-=10;
}
document.getElementById('annee').options[0].selected=true;
trouvedt();
}
//incremente de 1 le mois en cours
function ajoute()
{
if(document.getElementById('mois').selectedIndex==11) return;
document.getElementById('mois').options[document.getElementById('mois').selectedIndex+1].selected=true;
trouvedt();
}
//decremente de 1 le mois en cours
function enleve()
{
if(document.getElementById('mois').selectedIndex==0) return;
document.getElementById('mois').options[document.getElementById('mois').selectedIndex-1].selected=true;
trouvedt();
}
//envoi la date a la fenetre qui a ouvert le calendrier
function envoi(j)
{
//recupere le control de la fenetre qui a appele le popup ou devra aller la date
idcontrol=window.opener.document.getElementById('stok').value;
mois_cdie=parseInt(document.getElementById('mois').options[document.getElementById('mois').selectedIndex].value)+1;
annee_cdie=document.getElementById('annee').options[document.getElementById('annee').selectedIndex].text;
jour=j-document.getElementById('jinit').value;
//envoi la date
window.opener.document.getElementById(idcontrol).value=jour+'/'+mois_cdie+'/'+annee_cdie;
window.close();
}
</script>
</head>
<body onLoad="verif()">
<table align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="7" width="320">
<!--cette table est principalement modifiable sans style-->
<table align="center" border="0" class="control" cellpadding="0" cellspacing="0">
<tr>
<td width="20"></td>
<td width="30" align="right"><a href="javascript:enleve()"><</a></td>
<td align="center" class="control">
<select id="mois" onChange="trouvedt()">
<option value="0">Janvier</option>
<option value="1">Février</option>
<option value="2">Mars</option>
<option value="3">Avril</option>
<option value="4">Mai</option>
<option value="5">Juin</option>
<option value="6">Juillet</option>
<option value="7">Août</option>
<option value="8">Septembre</option>
<option value="9">Octobre</option>
<option value="10">Novembre</option>
<option value="11">Décembre</option>
</select>
</td>
<td width="30" align="left"><a href="javascript:ajoute()">></a></td>
<td width="10"></td>
<td width="80" align="left">
<select id="annee" onChange="trouvedt()">
<option >2000</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
<option >2004</option>
<option >2005</option>
<option >2006</option>
<option >2007</option>
<option >2008</option>
<option >2009</option>
</select>
</td>
<td style="text-align:left;width:55px">
<a href="javascript:augmente()">+</a><a href="javascript:diminue()">-</a>
</td>
</tr>
</table>
<!--fin de la table des listes-->
</td>
<tr>
<td class="jours">L</td>
<td class="jours">M</td>
<td class="jours">M</td>
<td class="jours">J</td>
<td class="jours">V</td>
<td class="jours">S</td>
<td class="jours"><font class="dim">D</font></td>
</tr>
<td class="un"><a href="javascript:envoi(1)"><font id="j_1"></font></a></td>
<td class="un"><a href="javascript:envoi(2)"><font id="j_2"></font></a></td>
<td class="un"><a href="javascript:envoi(3)"><font id="j_3"></font></a></td>
<td class="un"><a href="javascript:envoi(4)"><font id="j_4"></font></a></td>
<td class="un"><a href="javascript:envoi(5)"><font id="j_5"></font></a></td>
<td class="un"><a href="javascript:envoi(6)"><font id="j_6"></font></a></td>
<td class="un"><a class="dim" href="javascript:envoi(7)"><font id="j_7"></font></a></td>
</tr>
<tr>
<td class="deux"><a href="javascript:envoi(8)"><font id="j_8"></font></a></td>
<td class="deux"><a href="javascript:envoi(9)"><font id="j_9"></font></a></td>
<td class="deux"><a href="javascript:envoi(10)"><font id="j_10"></font></a></td>
<td class="deux"><a href="javascript:envoi(11)"><font id="j_11"></font></a></td>
<td class="deux"><a href="javascript:envoi(12)"><font id="j_12"></font></a></td>
<td class="deux"><a href="javascript:envoi(13)"><font id="j_13"></font></a></td>
<td class="deux"><a class="dim" href="javascript:envoi(14)"><font id="j_14"></font></a></td>
</tr>
<tr>
<td class="un"><a href="javascript:envoi(15)"><font id="j_15"></font></a></td>
<td class="un"><a href="javascript:envoi(16)"><font id="j_16"></font></a></td>
<td class="un"><a href="javascript:envoi(17)"><font id="j_17"></font></a></td>
<td class="un"><a href="javascript:envoi(18)"><font id="j_18"></font></a></td>
<td class="un"><a href="javascript:envoi(19)"><font id="j_19"></font></a></td>
<td class="un"><a href="javascript:envoi(20)"><font id="j_20"></font></a></td>
<td class="un"><a class="dim" href="javascript:envoi(21)"><font id="j_21"></font></a></td>
</tr>
<tr>
<td class="deux"><a href="javascript:envoi(22)"><font id="j_22"></font></a></td>
<td class="deux"><a href="javascript:envoi(23)"><font id="j_23"></font></a></td>
<td class="deux"><a href="javascript:envoi(24)"><font id="j_24"></font></a></td>
<td class="deux"><a href="javascript:envoi(25)"><font id="j_25"></font></a></td>
<td class="deux"><a href="javascript:envoi(26)"><font id="j_26"></font></a></td>
<td class="deux"><a href="javascript:envoi(27)"><font id="j_27"></font></a></td>
<td class="deux"><a class="dim" href="javascript:envoi(28)"><font id="j_28"></font></a></td>
</tr>
<tr>
<td class="un"><a href="javascript:envoi(29)"><font id="j_29"></font></a></td>
<td class="un"><a href="javascript:envoi(30)"><font id="j_30"></font></a></td>
<td class="un"><a href="javascript:envoi(31)"><font id="j_31"></font></a></td>
<td class="un"><a href="javascript:envoi(32)"><font id="j_32"></font></a></td>
<td class="un"><a href="javascript:envoi(33)"><font id="j_33"></font></a></td>
<td class="un"><a href="javascript:envoi(34)"><font id="j_34"></font></a></td>
<td class="un"><a class="dim" href="javascript:envoi(35)"><font id="j_35"></font></a></td>
</tr>
<tr>
<td class="deux"><a href="javascript:envoi(36)"><font id="j_36"></font></a></td>
<td class="deux"><a href="javascript:envoi(37)"><font id="j_37"></font></a></td>
<td class="deux"><a href="javascript:envoi(38)"><font id="j_38"></font></a></td>
<td class="deux"><a href="javascript:envoi(39)"><font id="j_39"></font></a></td>
<td class="deux"><a href="javascript:envoi(40)"><font id="j_40"></font></a></td>
<td class="deux"><a href="javascript:envoi(41)"><font id="j_41"></font></a></td>
<td class="deux"><a class="dim" href="javascript:envoi(42)"><font id="j_42"></font></a></td>
</tr>
</table>
<input type="hidden" id="jinit">
</body>
</html>
Code : Tout sélectionner
/* CSS Document */
body
{
font-family:verdana,Bitstream Vera Sans Mono,Bitstream Vera Sans,sans-serif;
margin-top:0px;
margin-left:0px;
}
table
{
border-collapse:collapse;
width:320px;
max-width:320px;
max-height:205px;
}
/*le choix de la couleur des cellules mois/annee se fait ici*/
td
{
text-align:center;
height:25px;
background-color:#663300;
}
/*cellules mois/annee; correspond en fait a la cellule de la liste mois*/
/*height sert pour toutes les cellules de la ligne*/
td.control
{
height:30px;
width:95px;
}
/*cellules des jours en lettre(L M M...)*/
td.jours
{
width:40px;
background-color:#006600;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:black;
border-top-width:1px;
border-top-style:solid;
border-top-color:black;
color:#990000;
font-weight:bold;
}
/*cellules des jours en chiffre ligne impair*/
td.un
{
background-color:#CC6600;
}
/*cellules des jours en chiffre ligne pair*/
td.deux
{
background-color:#933300;
}
select
{
background-color:#663300;
font-family:verdana,Bitstream Vera Sans Mono,Bitstream Vera Sans,sans-serif;
font-size:14px;
color:#FF9900;
}
/*balises font du dimanche D*/
font.dim
{
font-weight:bold;
color:#003300;
}
/*cellule des dimanches*/
a.dim
{
font-weight:bold;
}
a
{
text-decoration:none;
color:#003300;
}
a:hover
{
color:green;
}