Accueil > > > AFFICHE UN CALENDRIER SOUS UNE ZONE DE SAISIE
 AFFICHE UN CALENDRIER SOUS UNE ZONE DE SAISIE
 Information sur la source
 Description
Ce script affiche un calendrier en dessous d'une zone de saisie, avec en + : -contrôle de date -les jours feriés & jours de pause -modifié pour tourner sous firefox script ultra léger et super efficace !
 Source
- <html>
- <head>
-
- <style>
- input {border:1px blue solid;width:80px;}
- body {font-family:Tahoma;font-size:12px}
- td {font-family:Tahoma;font-size:12px}
- </style>
-
- <script language="javascript">
- moisX=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
- JourM=["Di","Lu","Ma","Me","Je","Ve","Sa"];
-
- var fermable_microcal=true;
- var select_old= null;
-
- var startWeek=0;//debut de la semaine 0=dim,1=lun,...
- var jourPause={0:true,6:true}; //jour de pause de la semaine
- var jourFeriee={"1-1":"jour an","1-5":"fête du travail","8-5":"armistice","14-7":"fête nationale","15-8":"ascencion","1-11":"armistice","11-11":"toussain","25-12":"noel"};
-
- //structure la date
- function strucDate(dateX)
- {return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};}
-
-
- var dateS= strucDate(new Date());//date Selectionné
- var dnow= strucDate(new Date());//date actuelle
-
-
- //retourne le ième jour du 1er du mois
- function premJourMois(mois,annee)
- {return (new Date(annee,mois-1,1).getDay());}
- //retourne le jour max du mois
- function JmaxMois(mois,annee)
- {return (new Date(annee,mois,0).getDate());}
-
-
- /* Test une date si elle est correct...spécial killer*/
- function testTypeDate(dateEntree)
- {
- tst=false;
- try
- {rc=dateEntree.split("/");nd=new Date(rc[2],(rc[1]-1),rc[0]);
- tst=(rc[2]>1800&&rc[2]<2200&&rc[2]==nd.getFullYear()&&rc[1]==(nd.getMonth()+1)&&rc[0]==nd.getDate());
- } catch(e) {}
- return tst;
- }
-
- //selection de la zone avec la souris
- function choix(koi,code)
- {
- if (code)
- { select_old= koi.style.background;
- koi.style.background ='#c0c0FF';
- }
- else
- {
- koi.style.background =select_old;
- }
- }
-
-
- function testTravail(oldX,xx,jj,mm,aa)
- {
- styleX="font-family:Tahoma;font-size:10px;text-align:center;";
- styleX+=(oldX)?"":"color:#e0e0e0;";
- styleX+="cursor:hand;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";
- if (jourPause[xx]||jourFeriee[jj+"-"+mm]!=null) styleX+="background:#f0f0f0;";
- if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee) styleX+="border:2px red solid;";
- return styleX;
- }
-
- //test si année bissextile
- function bissextile(annee) {
- return (annee%4==0 && annee %100!=0 || annee%400==0);
- }
-
- //Retourne le nombre de jour depuis le 1er janvier (num de semaine)
- function nbJAnnee(dateX){
- var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
- j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
- nb=nb_mois[m]+j-1 ;
- if (bissextile(a) && m>2) nb++;
- return nb;
- }
-
- //affiche le calendrier
- function view_microcal(actif,ki,source,mxS,axS)
- {
- if (actif)
- {
- //decalage du mois su on clique sur -/+
- if (mxS!=-1)
- {
- clearTimeout(cc);
- ki.focus();
- fermable_microcal=true;
- dateS.mois=mxS;
- dateS.annee=axS;
- if (dateS.mois<1) {dateS.annee--;dateS.mois+=12;}
- if (dateS.mois>12) {dateS.annee++;dateS.mois-=12;}
- }
- //init
- Dstart=(premJourMois(dateS.mois,dateS.annee)+7-startWeek)%7;
- jmaxi=JmaxMois(dateS.mois,dateS.annee);
- jmaxiAvant=JmaxMois((dateS.mois-1),dateS.annee);
- //si on veux ajouter le numero de la semaine ...
- //idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateS.mois+'-01-'+dateS.annee)))/7,10)+1;
-
- ymaxi=parseInt((jmaxi+Dstart+1)/7,10);
-
- //generation du tableau
- //--entête
- htm="<table><tr style='font-size:10px;font-family:Tahoma;text-align:center;'>";
- htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois-1)+","+dateS.annee+");\">-</td>";
- htm+="<td colspan='5'> <b> "+moisX[dateS.mois]+"</b> "+dateS.annee+"</td>";
- htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois+1)+","+dateS.annee+")\">+</td></tr>";
- //--corps
- htm+="<tr>";
- //affichage des jours DLMMJVS
- for (x=0;x<7;x++)
- htm+="<td style='font-size:10px;font-family:Tahoma;'><b>"+JourM[(x+startWeek)%7]+"</b></td>";
- htm+="</tr>"
-
-
- //------------------------
- for (y=0;y<=ymaxi;y++)
- {
- htm+="<tr>";
- for (x=0;x<7;x++)
- {
- idxP=y*7+x-Dstart+1; //numero du jour
- aa=dateS.annee;
- xx=(x+startWeek)%7;
- //jour du mois précedent
- if (idxP<=0)
- {
- jj=idxP+jmaxiAvant;mm=dateS.mois-1;
- if (mm==0)
- {mm=12;aa--;}
- htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";
- }
- else if (idxP>jmaxi) //jour du mois suivant
- {
- jj=idxP-jmaxi;mm=dateS.mois+1;
- if (mm==13)
- {mm=1;aa++;}
-
- htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
- else //jour du mois en cours
- {
- jj=idxP;mm=dateS.mois;
- htm+="<td style='"+testTravail(true,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
- }
- htm+="</tr>"
- }//-------------------------
- htm+="</table>"
- //affiche le tableau
- source.innerHTML=htm;
- source.style.visibility="";
- } else
- {
- //ferme le calendrier
- if (fermable_microcal)
- cc=setTimeout(source.id+".style.visibility='hidden'",500);
- }
- }
-
- </script>
-
- </head>
- <body style="margin:0px">
- <center>
- <br><br><b>micro-calendrier <i>par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br><br>
- Saisissez une date au format JJ/MM/AAAA
- <table cellpadding="0" cellspacing="0">
- <tr><td ><input type="text" maxlength="10" id="dateDebut" onfocus="view_microcal(true,dateDebut,microcal,-1,0);" onblur="view_microcal(false,dateDebut,microcal,-1,0);" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
- <tr><td><div id="microcal" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div></td></tr>
- </table>
- <center>
- </body>
- </html>
<html>
<head>
<style>
input {border:1px blue solid;width:80px;}
body {font-family:Tahoma;font-size:12px}
td {font-family:Tahoma;font-size:12px}
</style>
<script language="javascript">
moisX=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
JourM=["Di","Lu","Ma","Me","Je","Ve","Sa"];
var fermable_microcal=true;
var select_old= null;
var startWeek=0;//debut de la semaine 0=dim,1=lun,...
var jourPause={0:true,6:true}; //jour de pause de la semaine
var jourFeriee={"1-1":"jour an","1-5":"fête du travail","8-5":"armistice","14-7":"fête nationale","15-8":"ascencion","1-11":"armistice","11-11":"toussain","25-12":"noel"};
//structure la date
function strucDate(dateX)
{return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};}
var dateS= strucDate(new Date());//date Selectionné
var dnow= strucDate(new Date());//date actuelle
//retourne le ième jour du 1er du mois
function premJourMois(mois,annee)
{return (new Date(annee,mois-1,1).getDay());}
//retourne le jour max du mois
function JmaxMois(mois,annee)
{return (new Date(annee,mois,0).getDate());}
/* Test une date si elle est correct...spécial killer*/
function testTypeDate(dateEntree)
{
tst=false;
try
{rc=dateEntree.split("/");nd=new Date(rc[2],(rc[1]-1),rc[0]);
tst=(rc[2]>1800&&rc[2]<2200&&rc[2]==nd.getFullYear()&&rc[1]==(nd.getMonth()+1)&&rc[0]==nd.getDate());
} catch(e) {}
return tst;
}
//selection de la zone avec la souris
function choix(koi,code)
{
if (code)
{ select_old= koi.style.background;
koi.style.background ='#c0c0FF';
}
else
{
koi.style.background =select_old;
}
}
function testTravail(oldX,xx,jj,mm,aa)
{
styleX="font-family:Tahoma;font-size:10px;text-align:center;";
styleX+=(oldX)?"":"color:#e0e0e0;";
styleX+="cursor:hand;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";
if (jourPause[xx]||jourFeriee[jj+"-"+mm]!=null) styleX+="background:#f0f0f0;";
if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee) styleX+="border:2px red solid;";
return styleX;
}
//test si année bissextile
function bissextile(annee) {
return (annee%4==0 && annee %100!=0 || annee%400==0);
}
//Retourne le nombre de jour depuis le 1er janvier (num de semaine)
function nbJAnnee(dateX){
var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
nb=nb_mois[m]+j-1 ;
if (bissextile(a) && m>2) nb++;
return nb;
}
//affiche le calendrier
function view_microcal(actif,ki,source,mxS,axS)
{
if (actif)
{
//decalage du mois su on clique sur -/+
if (mxS!=-1)
{
clearTimeout(cc);
ki.focus();
fermable_microcal=true;
dateS.mois=mxS;
dateS.annee=axS;
if (dateS.mois<1) {dateS.annee--;dateS.mois+=12;}
if (dateS.mois>12) {dateS.annee++;dateS.mois-=12;}
}
//init
Dstart=(premJourMois(dateS.mois,dateS.annee)+7-startWeek)%7;
jmaxi=JmaxMois(dateS.mois,dateS.annee);
jmaxiAvant=JmaxMois((dateS.mois-1),dateS.annee);
//si on veux ajouter le numero de la semaine ...
//idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateS.mois+'-01-'+dateS.annee)))/7,10)+1;
ymaxi=parseInt((jmaxi+Dstart+1)/7,10);
//generation du tableau
//--entête
htm="<table><tr style='font-size:10px;font-family:Tahoma;text-align:center;'>";
htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois-1)+","+dateS.annee+");\">-</td>";
htm+="<td colspan='5'> <b> "+moisX[dateS.mois]+"</b> "+dateS.annee+"</td>";
htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois+1)+","+dateS.annee+")\">+</td></tr>";
//--corps
htm+="<tr>";
//affichage des jours DLMMJVS
for (x=0;x<7;x++)
htm+="<td style='font-size:10px;font-family:Tahoma;'><b>"+JourM[(x+startWeek)%7]+"</b></td>";
htm+="</tr>"
//------------------------
for (y=0;y<=ymaxi;y++)
{
htm+="<tr>";
for (x=0;x<7;x++)
{
idxP=y*7+x-Dstart+1; //numero du jour
aa=dateS.annee;
xx=(x+startWeek)%7;
//jour du mois précedent
if (idxP<=0)
{
jj=idxP+jmaxiAvant;mm=dateS.mois-1;
if (mm==0)
{mm=12;aa--;}
htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";
}
else if (idxP>jmaxi) //jour du mois suivant
{
jj=idxP-jmaxi;mm=dateS.mois+1;
if (mm==13)
{mm=1;aa++;}
htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
else //jour du mois en cours
{
jj=idxP;mm=dateS.mois;
htm+="<td style='"+testTravail(true,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)' onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
}
htm+="</tr>"
}//-------------------------
htm+="</table>"
//affiche le tableau
source.innerHTML=htm;
source.style.visibility="";
} else
{
//ferme le calendrier
if (fermable_microcal)
cc=setTimeout(source.id+".style.visibility='hidden'",500);
}
}
</script>
</head>
<body style="margin:0px">
<center>
<br><br><b>micro-calendrier <i>par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br><br>
Saisissez une date au format JJ/MM/AAAA
<table cellpadding="0" cellspacing="0">
<tr><td ><input type="text" maxlength="10" id="dateDebut" onfocus="view_microcal(true,dateDebut,microcal,-1,0);" onblur="view_microcal(false,dateDebut,microcal,-1,0);" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
<tr><td><div id="microcal" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div></td></tr>
</table>
<center>
</body>
</html>
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
javascript et formulaire [ par CHABRY ]
Bonjour, je me demande comment puis-je déterminer un par un les noms de chapms de saisie d'un formulaire car je pense construire un fichier .js qui s
javascript qui foire [ par jofer ]
salut à tousvoilà j'ai fait un petit code javascrit pour faire des alertes dasn le cadre d'une saisie. les deux alertes (avec focus) fonctionne sauf q
téléchargement d'un calendrier en javascript [ par FIFI69 ]
il n'y a rien dans le téléchargement, seulement des raccourcis et des liens.
Problème avec les popup [ par vodkapomme43 ]
Bonjour à tous,Voila mon problème: j'ai crée un bouton qui execute un javascript: il affiche une popup avec un calendrier (le bouton se
DateTimePicker [ par theboboteam ]
Bonjour, peut on utiliser l'activeX DateTimePicker en javascript pour afficher un calendrier dans mes pages htm?j'ai bien vue des sources de calendrie
calendar javascripte [ par arouwa ]
Bonjour,je veux verifier si la date a été sélectionnée dans ma page, alors je vbeux le faire avec du javascripte alors je passe mon objet calendar dan
[Debutant] [Javascript] Désactivation aide saisie FireFox saur un champ [ par infonini ]
Bonjour,Je cherche à désactiver sur un champ (input text) l'aide à la saisie de firefox, afin de mettre ma propre aide à la saisieEst ce que quelqu'un
un input en ecoute un autre? [ par newlc ]
Salut,je souhaite faire un truc tout bête en javascript,en faite je voudrais que lorsque que l'on saisie du texte dans un input et bien que le second
Problème javascript entrainant des lenteurs avec IE 7 [ par yoanm ]
Bonjour a tous, Je travaille actuellement sur la mise en place de calendrier pour ma boite et je suis confronté à un problème de lenteur exponentiell
Envoyer variable Javascript vers une autre page (par URL) [ par midoxe ]
Bonjour, je travail sur une application web, et je me bloque sur ce problème : le clique sur un lien provoque l'ouverture d'une fenetre javascript q
|
Derniers Blogs
 CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Logiciels
 Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|