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
 COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ?MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg
La prochaine session de MyTIC aura lieu à Namur, le 23 mars prochain. Pendant presque une heure, nous parlerons de SharePoint 2010. Voici un aperçu du programme.
Accueil : 17h30 Début de la session : 18h00 - Les nouvelles int...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
 FERMER LA PAGEFERMER LA PAGE par bydouille
Cliquez pour lire la suite par bydouille
Logiciels
 Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|