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
Formatage de chaine javascript [ par shaft107 ]
slt à tousj'ai 4 petits pb,1) je voudrai en réalité changer le format de ma date après la saisie ex : l'utilisateur saisi 20092004 et moi je lui prése
JavaScript sur safari [ par Thundrax ]
Hello,Je suis entrain de faire une appli web, alors évidement je suis entrain de test sur différent navigateur.J'ouvre un popup d'une fenêtre formaté
|
Derniers Blogs
 TECHDAYS PARIS 2010 : ADMINISTRATION SHAREPOINT 2010TECHDAYS PARIS 2010 : ADMINISTRATION SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Patrick Guimonet et Benoit Hamet Cette session traitera des différents points exigés durant les taches d'administration : Planification (architecture, hébergement, authentification, .) Opération e...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [TECHDAYS 2010] #03 - WEB CONTENT MANAGEMENT SOUS SHAREPOINT 2010[TECHDAYS 2010] #03 - WEB CONTENT MANAGEMENT SOUS SHAREPOINT 2010 par pierre
Stephane Cordonnier de MCNext nous présente les fonctionnalités Web Content Management (WCM) sous SharePoint 2010. Qu'est-ce que le WCM ECM, GED, RM, WCM c'est quoi Plateforme SharePoint Versions SharePoint 2010 SharePoint Fondation...
Cliquez pour lire la suite de l'article par pierre [DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja
C'est le dernier principe des principes du Design Orienté Objet (The Principles of Object Oriented Design) fondés par Robert C. Martin plus connu sous le pseudonyme d'Uncle Bob.
l'image empruntée de LosTechies.
Je ne traite pas les principes dans...
Cliquez pour lire la suite de l'article par tja TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURSTECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice
Animé par: Laurent Cotton Le développement dans SharePoint 2010 passe par plusieurs axes qui seront évoqués dans cette session, mais plus particulièrement les développements simples lié au besoin Business Business Connectivity Services Ce BCS es...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Forum
 PETITE HORLOGEPETITE HORLOGE par tatillon
Cliquez pour lire la suite par tatillon
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
Comparez les prix
HTC Hero
Entre 550€ et 550€
|