Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

AFFICHER UN CALENDRIER SOUS UNE ZONE DE SAISIE V3.0


Information sur la source

Catégorie :Date & Heure Classé sous : calendrier, calendar, agenda, date Niveau : Expert Date de création : 04/07/2008 Date de mise à jour : 29/10/2008 13:49:29 Vu : 6 327

Note :
Aucune note

Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

Description

affiche un calendrier sous une zone de saisie
version 3.0 de mon calendrier
-script 100% paramétrable



 

Source

  • <html>
  • <head>
  • <style>
  • input {border:1px blue solid;width:80px;}
  • body {font-family:Tahoma;font-size:12px}
  • .divCal {position:absolute;border:1px red dashed;background:#ffffff;}
  • .divCal a{text-decoration:none; width:100%; }
  • .divCal table {font-size:12px;font-family:Tahoma;text-align:center;margin:0px;width:140px;}
  • .divCal td {margin : 0px;border:1px solid #FFFFFF;}
  • .divCal .zoneTitre {font-size:12px;font-family:Tahoma;text-align:center;margin:0px;background:pink;}
  • .divCal .zoneNav {font-size:10px;font-family:Tahoma;text-align:center;margin:0px;cursor:pointer;}
  • .divCal .zoneMois {font-family:Tahoma;width:70px;margin:0px;}
  • .divCal .zoneAnnee {font-size:10px;font-weight:bold;text-align:right;margin:0px;width:100%;}
  • .divCal .nSemaine {font-family:Tahoma;width:30px;margin:0px;color:green;}
  • .divCal div{ margin : 0px;}
  • .divCal .tdx {color:#F0F0F0;} /*par defaut*/
  • .divCal .tdx .enWeekend {background:#C0C0C0;}
  • .divCal .tdx .enFeriee {background:#C0C0C0;}
  • .divCal .tdx .enMois {color:black;font-weight:bold;}
  • .divCal .tdx .aujourdhui {border:2px solid red;}
  • .divCal .tdxNow {color:black;font-weight:bold;}
  • .divCal .tdxNow:hover {background:lightgreen;}
  • .divCal .tdx:hover {background:lightgreen;}
  • .divCal .tdx:hover .enWeekend {background:green;}
  • .divCal .tdx:hover .enMois {color:black;font-weight:bold;background:lightgreen;} /*pour firefox */
  • </style>
  • <script language="javascript">
  • /****************
  • * script MICRO-CAL par Amroune Selim (amrounix@gmail.com)
  • *toutes copies, diffusions,modifications ou améliorations sont autorisées
  • ****************/
  • /*--cette partie du script peut être copié dans un fichier .js --*/
  • /*variable globale*/
  • var pDefaut = {"mois" : new Array("Janvier","F&eacute;vrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","D&eacute;cembre"),
  • "jour" : new Array("Di","Lu","Ma","Me","Je","Ve","Sa"),"jLib" : new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"),
  • "titre" : "micro-cal","aujourdhui" : "aujourd'hui",
  • "debutSemaine" : 1, /*debut de la semaine 0=dim,1=lun,...*/
  • "jPause" : {6:true,0:true},/*jour de pause de la semaine (samedi & dimanche)*/
  • "jFeriee": {"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"} ,
  • "moisMoins" : "-","moisPlus" : "+", /*naviagation par mois*/ "anneeMoins" : "<","anneePlus" : ">", /*naviagation par annee*/
  • "format" : "%j/%m/%a" /*format de sortie : %j = jour, %m = mois, %a =année*/ }
  • var tempo = new Array(); /*gestion de la fermeture des calendriers quand on perd le focus*/
  • function nbJ(dateX) /*Retourne le nombre de jour depuis le 1er janvier (pr le num de semaine)*/
  • {
  • var j_mois=[0,31,59,90,120,151,181,212,243,273,304,334];
  • mm=dateX.getMonth();aa=dateX.getFullYear();nb=j_mois[mm]+dateX.getDate()-1 ;
  • if ((aa%4==0 && aa %100!=0 || aa%400==0) && mm>1) nb++; /*test bissextile*/
  • return nb;
  • }
  • function gCal(src,srcId,mm,yy) /*génère le calendrier*/
  • {
  • if (tempo!=null&&tempo[srcId]!=null)
  • {
  • clearTimeout(tempo[srcId]);
  • document.getElementById(src).focus();
  • }
  • if (mm<0) {mm+=12;yy--;}
  • else if (mm>11) {mm-=12;yy++;}
  • dnow=new Date();
  • param=document.getElementById(srcId).parametre;
  • htm="<table cellpadding=0 cellspacing=0 >";
  • /*titre*/
  • if (param["titre"]!= null )
  • {htm+="<tr><td colspan='8' class='zoneTitre' >"+param["titre"]+"</td></tr>";}
  • /*entete*/
  • htm+="<tr><td colspan='8'><table width='100%' cellpadding=0 cellspacing=0 ><tr>";
  • htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+mm+","+(yy-1)+")\">"+param["anneeMoins"]+"</td>";
  • htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+(mm-1)+","+yy+")\">"+param["moisMoins"]+"</td>";
  • htm+="<td class='zoneMois'>"+param["mois"][mm]+"</td>";
  • htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+(mm+1)+","+yy+")\" >"+param["moisPlus"]+"</td>";
  • htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+mm+","+(yy+1)+")\">"+param["anneePlus"]+"</td>";
  • htm+="</tr></table></td></tr>";
  • /*jour*/
  • htm+="<tr><td></td>";
  • pJs = param["debutSemaine"];
  • pJm = new Date(yy,mm,1).getDay(); /*jour du 1ere du mois*/
  • pjT = 1-pJm+pJs;
  • pjT-=(pjT>1)?7:0;
  • dateX = new Date(yy,mm,pjT);
  • for (j=0;j<7;j++)
  • {htm+="<td>"+param["jour"][(j+pJs)%7]+"</td>";}
  • htm+="</tr>";
  • avantFinMois=true;idx=0;idxM=parseInt(nbJ(new Date(yy,mm,1))/7+1,10);
  • while(avantFinMois)
  • {
  • htm+=(idx%7==0)?"<tr><td class='nSemaine' >"+idxM+"</td>":"";
  • htm+="<td><a class='tdx' href='#' onclick=\"javascript:choix("+dateX.getFullYear()+","+dateX.getMonth()+","+dateX.getDate()+",'"+srcId+"','"+src+"')\" >"+subDiv(param,idx,dateX,mm,aa,0)+"</a></td>";
  • idx++;
  • if (idx%7==0)
  • {htm+="</tr>"; idxM++;}
  • dateX= new Date(dateX.getFullYear(),dateX.getMonth(),dateX.getDate()+1);
  • if (idx>7&&idx%7==0&&dateX.getMonth()!=mm)
  • {avantFinMois=false;}
  • }
  • /*annee*/htm+="<tr><td colspan='6'><a class='tdxNow' href='#' onclick=\"javascript:choix("+dnow.getFullYear()+","+dnow.getMonth()+","+dnow.getDate()+",'"+srcId+"','"+src+"')\" >"+param["aujourdhui"]+"</a></td><td colspan='2' class='zoneAnnee'>"+yy+"</td></tr>";
  • htm+="</table>";
  • document.getElementById(srcId).innerHTML=htm;
  • }
  • function addZero(val) { return ((val<10)?"0":"")+val;}
  • function choix(aa,mm,jj,srcId,src)
  • {
  • var datePos=new Date(aa,mm,jj);var jour = datePos.getDay();
  • param=document.getElementById(srcId).parametre;
  • var dateAffiche = param["format"].replace("%j",addZero(datePos.getDate())).replace("%k",datePos.getDate()).replace("%d",param["jLib"][jour]);
  • dateAffiche = dateAffiche.replace("%m",addZero(datePos.getMonth()+1)).replace("%n",datePos.getMonth()+1).replace("%p",param["mois"][datePos.getMonth()]);
  • dateAffiche = dateAffiche.replace("%a",datePos.getFullYear()).replace("%y",datePos.getYear());
  • document.getElementById(src).value = dateAffiche;
  • }
  • function subDiv(param,idx,dateX,mm,aa,code)
  • {
  • pJs = param["debutSemaine"];
  • dnow=new Date();
  • switch(code)
  • {
  • case 0 : return (param["jPause"][(idx+pJs)%7]==true) ? "<div class='enWeekEnd' >"+subDiv(param,idx,dateX,mm,aa,1)+"</div>" : subDiv(param,idx,dateX,mm,aa,1) ; break;
  • case 1 : return (param["jFeriee"][dateX.getDate()+"-"+(dateX.getMonth()+1)]!=null) ? ("<div class=\"enFeriee\" title=\""+param["jFeriee"][dateX.getDate()+"-"+(dateX.getMonth()+1)]+"\" >"+subDiv(param,idx,dateX,mm,aa,2)+"</div>") : subDiv(param,idx,dateX,mm,aa,2) ; break;
  • case 2 : return (dateX.getMonth()==mm) ? "<div class='enMois' >"+subDiv(param,idx,dateX,mm,aa,3)+"</div>" : subDiv(param,idx,dateX,mm,aa,3) ; break;
  • case 3 : return (dateX.getMonth()==dnow.getMonth()&&dateX.getFullYear()==dnow.getFullYear()&&dateX.getDate()==dnow.getDate()) ? "<div class='aujourdhui' >"+subDiv(param,idx,dateX,mm,aa,4)+"</div>" : subDiv(param,idx,dateX,mm,aa,4) ; break;
  • case 4 : return dateX.getDate() ; break;
  • }
  • }
  • function visuCal(src,paramX)
  • {
  • srcId = src.id+"_cal";
  • if (document.getElementById(srcId)==null)
  • {
  • param={}
  • for (e in pDefaut)
  • {trouve=false;
  • if (paramX!=null)
  • for (i in paramX) { if (e==i) {param[e]=paramX[e];trouve=true;} }
  • if (!trouve) param[e]=pDefaut[e];
  • }
  • dnow= new Date();
  • div = document.createElement('div');
  • div.setAttribute('id',srcId);
  • div.style.position = 'absolute';
  • div.style.top = src.offsetTop + src.offsetHeight + 'px';
  • div.style.left = src.offsetLeft + 'px'; /*this.deltaG = 0; */
  • div.className = 'divCal';
  • div.parametre = param;
  • document.body.appendChild(div);
  • gCal(src.id,srcId,dnow.getMonth(),dnow.getFullYear(),param);
  • } else
  • {
  • document.getElementById(src.id+"_cal").style.display='inline';
  • }
  • }
  • function masqueCal(src)
  • {
  • tempo[src.id+"_cal"]=window.setTimeout("document.getElementById('"+src.id+"_cal').style.display='none'",500);
  • }
  • /******fin de la partie du script qui peut être copiée dans un fichier.js ******/
  • </script>
  • <script language="javascript">
  • function testTypeDate(src) /* Test une date (JJ/MM/AAAA) si elle est correct...spécial killer*/
  • {
  • tst=false;
  • try
  • {rc=src.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?'black':'red';
  • }
  • /*création d'un paramétrage spécifique pour le changement de langue ou de propriété*/
  • paramGB={"mois" : new Array("January","February","March","April","May","June","July","August","September","October","November","December"),
  • "jour" : new Array("Su","Mo","Tu","We","Th","Fr","Sa"), "jLib" : new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"),
  • "jFeriee" : {"26-5":"memorial Day","29-5":"JFK Birthday","14-6":"Flag Day","15-6":"Father's Day","1-9":"Labor Day","11-9":"Patriot Day","13-10":"Columbus Day","31-10":"Halloween", "2-11" : "Daylight Saving Time Ends" , "4-11" : "Election Day", "11-11" : "Veteran's Day" , "27-11" : "Thanksgiving" , "24-12" : "Christmas Eve" , "25-12" : "Christmas"},
  • "debutSemaine" : 0, "format": "%a-%m-%j" , "titre" : "start","aujourdhui" : "now"}
  • paramLib={"titre": "date par libellé","format" : "%d, %k %p %a"}
  • </script>
  • </head>
  • <body style="margin:0px">
  • <center>
  • <br><br><b>micro-calendrier V3<i> par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br><br>
  • date de début<input type="text" maxlength="10" id="dateDebut" onfocus="visuCal(this);" onblur="masqueCal(this);" onkeyup="this.style.color=testTypeDate(this.value)">&nbsp;&nbsp;&nbsp;
  • date de fin<input type="text" maxlength="10" id="dateFin" onfocus="visuCal(this);" onblur="masqueCal(this);" onkeyup="this.style.color=testTypeDate(this.value)"><br><br>
  • date in english<input type="text" maxlength="10" id="dateGB" onfocus="visuCal(this,paramGB);" onblur="masqueCal(this);" ><br><br>
  • date avec libellé<input type="text" style="width:200px" id="dateLib" onfocus="visuCal(this,paramLib);" onblur="masqueCal(this);" ><br>
  • <center>
  • </body>
  • </html>
<html>
<head>
<style>
input   {border:1px blue solid;width:80px;}
body   {font-family:Tahoma;font-size:12px}

.divCal {position:absolute;border:1px red dashed;background:#ffffff;}
.divCal a{text-decoration:none; width:100%;	}
.divCal table {font-size:12px;font-family:Tahoma;text-align:center;margin:0px;width:140px;}
.divCal td {margin : 0px;border:1px solid #FFFFFF;}
.divCal .zoneTitre {font-size:12px;font-family:Tahoma;text-align:center;margin:0px;background:pink;}
.divCal .zoneNav {font-size:10px;font-family:Tahoma;text-align:center;margin:0px;cursor:pointer;}
.divCal .zoneMois {font-family:Tahoma;width:70px;margin:0px;}
.divCal .zoneAnnee {font-size:10px;font-weight:bold;text-align:right;margin:0px;width:100%;}
.divCal .nSemaine {font-family:Tahoma;width:30px;margin:0px;color:green;}
.divCal div{ margin : 0px;}

.divCal .tdx {color:#F0F0F0;} /*par defaut*/
.divCal .tdx .enWeekend {background:#C0C0C0;}
.divCal .tdx .enFeriee {background:#C0C0C0;}
.divCal .tdx .enMois {color:black;font-weight:bold;}
.divCal .tdx .aujourdhui {border:2px solid red;}

.divCal .tdxNow {color:black;font-weight:bold;} 
.divCal .tdxNow:hover {background:lightgreen;} 

.divCal .tdx:hover {background:lightgreen;}
.divCal .tdx:hover .enWeekend {background:green;}
.divCal .tdx:hover .enMois {color:black;font-weight:bold;background:lightgreen;} /*pour firefox */
</style>

<script language="javascript">
/****************
* script MICRO-CAL par Amroune Selim (amrounix@gmail.com)
*toutes copies, diffusions,modifications ou améliorations sont autorisées
****************/
/*--cette partie du script peut être copié dans un fichier .js --*/
/*variable globale*/
var pDefaut = {"mois" : new Array("Janvier","F&eacute;vrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","D&eacute;cembre"),
"jour" : new Array("Di","Lu","Ma","Me","Je","Ve","Sa"),"jLib" : new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"),
"titre" : "micro-cal","aujourdhui" : "aujourd'hui",
"debutSemaine" : 1, /*debut de la semaine 0=dim,1=lun,...*/
"jPause" : {6:true,0:true},/*jour de pause de la semaine (samedi & dimanche)*/
"jFeriee": {"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"} ,
"moisMoins" : "-","moisPlus" : "+", /*naviagation par mois*/ "anneeMoins" : "<","anneePlus" : ">", /*naviagation par annee*/
"format" : "%j/%m/%a" /*format de sortie : %j = jour, %m = mois, %a =année*/ }
var tempo = new Array(); /*gestion de la fermeture des calendriers quand on perd le focus*/

function nbJ(dateX) /*Retourne le nombre de jour depuis le 1er janvier (pr le num de semaine)*/
{
	var j_mois=[0,31,59,90,120,151,181,212,243,273,304,334];
	mm=dateX.getMonth();aa=dateX.getFullYear();nb=j_mois[mm]+dateX.getDate()-1 ; 
	if ((aa%4==0 && aa %100!=0 || aa%400==0) && mm>1) nb++; /*test bissextile*/
	return nb;
}

function gCal(src,srcId,mm,yy) /*génère le calendrier*/
{
	if (tempo!=null&&tempo[srcId]!=null) 
	{
		clearTimeout(tempo[srcId]);
		document.getElementById(src).focus();
	}
	if (mm<0) {mm+=12;yy--;} 
		else if (mm>11) {mm-=12;yy++;}
	dnow=new Date();
	param=document.getElementById(srcId).parametre;
	htm="<table cellpadding=0 cellspacing=0 >";
	/*titre*/
	if (param["titre"]!= null ) 
		{htm+="<tr><td colspan='8' class='zoneTitre' >"+param["titre"]+"</td></tr>";}
	/*entete*/
	htm+="<tr><td colspan='8'><table width='100%' cellpadding=0 cellspacing=0 ><tr>";
	htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+mm+","+(yy-1)+")\">"+param["anneeMoins"]+"</td>";
	htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+(mm-1)+","+yy+")\">"+param["moisMoins"]+"</td>";
	htm+="<td class='zoneMois'>"+param["mois"][mm]+"</td>";
	htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+(mm+1)+","+yy+")\" >"+param["moisPlus"]+"</td>";
	htm+="<td class='zoneNav' onclick=\"gCal('"+src+"','"+srcId+"',"+mm+","+(yy+1)+")\">"+param["anneePlus"]+"</td>";
	htm+="</tr></table></td></tr>";
	/*jour*/
	htm+="<tr><td></td>";
	pJs = param["debutSemaine"];
	pJm = new Date(yy,mm,1).getDay(); /*jour du 1ere du mois*/
	pjT = 1-pJm+pJs;
	pjT-=(pjT>1)?7:0;
	dateX = new Date(yy,mm,pjT);
	for (j=0;j<7;j++) 
		{htm+="<td>"+param["jour"][(j+pJs)%7]+"</td>";} 
	htm+="</tr>";
	avantFinMois=true;idx=0;idxM=parseInt(nbJ(new Date(yy,mm,1))/7+1,10);
	while(avantFinMois)
	{
		htm+=(idx%7==0)?"<tr><td class='nSemaine' >"+idxM+"</td>":"";
		htm+="<td><a class='tdx' href='#' onclick=\"javascript:choix("+dateX.getFullYear()+","+dateX.getMonth()+","+dateX.getDate()+",'"+srcId+"','"+src+"')\"	>"+subDiv(param,idx,dateX,mm,aa,0)+"</a></td>";
		idx++;
		if (idx%7==0)
			{htm+="</tr>"; idxM++;}
			dateX= new Date(dateX.getFullYear(),dateX.getMonth(),dateX.getDate()+1);
		if (idx>7&&idx%7==0&&dateX.getMonth()!=mm) 
			{avantFinMois=false;}
	}
	/*annee*/htm+="<tr><td colspan='6'><a class='tdxNow' href='#' onclick=\"javascript:choix("+dnow.getFullYear()+","+dnow.getMonth()+","+dnow.getDate()+",'"+srcId+"','"+src+"')\"	>"+param["aujourdhui"]+"</a></td><td colspan='2'  class='zoneAnnee'>"+yy+"</td></tr>";
	htm+="</table>";
	document.getElementById(srcId).innerHTML=htm;
}
function addZero(val) { return ((val<10)?"0":"")+val;}
function choix(aa,mm,jj,srcId,src)
{
var datePos=new Date(aa,mm,jj);var jour = datePos.getDay(); 
param=document.getElementById(srcId).parametre;
var dateAffiche = param["format"].replace("%j",addZero(datePos.getDate())).replace("%k",datePos.getDate()).replace("%d",param["jLib"][jour]);
dateAffiche = dateAffiche.replace("%m",addZero(datePos.getMonth()+1)).replace("%n",datePos.getMonth()+1).replace("%p",param["mois"][datePos.getMonth()]);
dateAffiche = dateAffiche.replace("%a",datePos.getFullYear()).replace("%y",datePos.getYear());
document.getElementById(src).value = dateAffiche; 
}

function subDiv(param,idx,dateX,mm,aa,code)
{
	pJs = param["debutSemaine"];
	dnow=new Date();
	switch(code)
	{
		case 0 : return (param["jPause"][(idx+pJs)%7]==true) ? "<div class='enWeekEnd' >"+subDiv(param,idx,dateX,mm,aa,1)+"</div>" : subDiv(param,idx,dateX,mm,aa,1) ; break;
		case 1 : return (param["jFeriee"][dateX.getDate()+"-"+(dateX.getMonth()+1)]!=null) ? ("<div class=\"enFeriee\" title=\""+param["jFeriee"][dateX.getDate()+"-"+(dateX.getMonth()+1)]+"\"  >"+subDiv(param,idx,dateX,mm,aa,2)+"</div>") : subDiv(param,idx,dateX,mm,aa,2) ; break;
		case 2 : return (dateX.getMonth()==mm) ? "<div class='enMois' >"+subDiv(param,idx,dateX,mm,aa,3)+"</div>" : subDiv(param,idx,dateX,mm,aa,3) ; break;
		case 3 : return (dateX.getMonth()==dnow.getMonth()&&dateX.getFullYear()==dnow.getFullYear()&&dateX.getDate()==dnow.getDate()) ? "<div class='aujourdhui' >"+subDiv(param,idx,dateX,mm,aa,4)+"</div>" : subDiv(param,idx,dateX,mm,aa,4) ; break;
		case 4 : return dateX.getDate() ; break;
	}
}

function visuCal(src,paramX)
{
	srcId = src.id+"_cal";
	if (document.getElementById(srcId)==null)
	{
		param={}
		for (e in pDefaut)
		{trouve=false;
		 if (paramX!=null) 
			for (i in paramX) { if (e==i) {param[e]=paramX[e];trouve=true;} }
		if (!trouve) param[e]=pDefaut[e];
		}
		dnow= new Date();
		div = document.createElement('div');
		div.setAttribute('id',srcId);
		div.style.position = 'absolute';	
		div.style.top = src.offsetTop + src.offsetHeight + 'px';
		div.style.left = src.offsetLeft + 'px'; /*this.deltaG = 0;  */
		div.className = 'divCal'; 
		div.parametre = param;
		document.body.appendChild(div);
		gCal(src.id,srcId,dnow.getMonth(),dnow.getFullYear(),param);
	} else
	{
		document.getElementById(src.id+"_cal").style.display='inline';
	}
}

function masqueCal(src)
{
 tempo[src.id+"_cal"]=window.setTimeout("document.getElementById('"+src.id+"_cal').style.display='none'",500);
}
/******fin de la partie du script qui peut être copiée dans un fichier.js ******/
</script>

<script language="javascript">
function testTypeDate(src) 	/* Test une date (JJ/MM/AAAA) si elle est correct...spécial killer*/
{
	tst=false;
	try
	{rc=src.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?'black':'red';
}
/*création d'un paramétrage spécifique pour le changement de langue ou de propriété*/
paramGB={"mois" : new Array("January","February","March","April","May","June","July","August","September","October","November","December"),
"jour" : new Array("Su","Mo","Tu","We","Th","Fr","Sa"), "jLib" : new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"), 
"jFeriee" : {"26-5":"memorial Day","29-5":"JFK Birthday","14-6":"Flag Day","15-6":"Father's Day","1-9":"Labor Day","11-9":"Patriot Day","13-10":"Columbus Day","31-10":"Halloween", "2-11" : "Daylight Saving Time Ends" , "4-11" : "Election Day", "11-11" : "Veteran's Day" , "27-11" : "Thanksgiving" , "24-12" : "Christmas Eve" , "25-12" : "Christmas"},
"debutSemaine" : 0, "format": "%a-%m-%j" , "titre" : "start","aujourdhui" : "now"}
paramLib={"titre": "date par libellé","format" : "%d, %k %p %a"}
</script>

</head>
<body style="margin:0px">
<center>
<br><br><b>micro-calendrier V3<i> par AmRouNiX (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br><br>
date de début<input type="text" maxlength="10" id="dateDebut" onfocus="visuCal(this);" onblur="masqueCal(this);" onkeyup="this.style.color=testTypeDate(this.value)">&nbsp;&nbsp;&nbsp;
date de fin<input type="text" maxlength="10" id="dateFin" onfocus="visuCal(this);" onblur="masqueCal(this);" onkeyup="this.style.color=testTypeDate(this.value)"><br><br>
date in english<input type="text" maxlength="10" id="dateGB" onfocus="visuCal(this,paramGB);" onblur="masqueCal(this);" ><br><br>
date avec libellé<input type="text" style="width:200px" id="dateLib" onfocus="visuCal(this,paramLib);" onblur="masqueCal(this);" ><br>

<center>
</body>
</html>

Conclusion

entièrement remodelé et plus simple que les versions précédentes
 

Historique

08 juillet 2008 09:13:51 :
liste des modifications 8/7/2008 : -passage en DOM -simplication de l'appel de la méthode
08 juillet 2008 09:17:01 :
-passage en DOM -simplification de l'appel de la méthode
08 juillet 2008 11:35:22 :
-ajout de la recherche <input type="date" ...>
08 juillet 2008 14:15:42 :
-correction pour tourner sous IE
29 octobre 2008 13:49:30 :
entièrement remodelé et plus simple que les versions précédentes

Commentaires et avis

signaler à un administrateur
Commentaire de amrounix le 04/07/2008 12:49:45

j'attends de finir mon code avant de tout mettre dans un fichier .js et écrire une doc qui va avec !
si vous avez des questions n'hésitez pas !

@+

signaler à un administrateur
Commentaire de bultez le 04/07/2008 13:33:31


je ne voudrais ni être rabat-joie ni éreinteur stérile,

mais "ULTIMATE" ? donc on ne fera jamais mieux ?
"Niveau initié" ? pour celui qui l'a écrit
ou pour ceux qui vont utiliser ?
"ultra paramétrable" ? où ?
je ne dis pas que ce que tu as fait est mauvais ! loin de là !
je ne me permettrai aucune note, ni aucune critique sur le code  !
mais à part afficher un calendrier, ce n'est que la 68957892ème
source de ce type, ça fait quoi de plus ? ou je n'ai pas tout vu ?

signaler à un administrateur
Commentaire de mickaelpfr le 04/07/2008 15:22:52

+1 avec bultez :

code de paramétrage , ultra paramétrable ? ou ultra bordélique ...
de plus tu dois créer autant de calendrier que de champs input donc très limité , pas de possibilité de le gérer de façon non intrusif ?

même le code est un peu trop bordélique selon moi ...

va faire un tour sur www.developpez.com section javascript puis dans les contributions , il y en a un très propre ...

signaler à un administrateur
Commentaire de XtremDuke le 04/07/2008 17:09:20

"htm+="<tr>";"

>> Faut essayer d'arrêter de construire tout avec l'innerHTML. Essai de construire ton document via le DOM.

"<script language="javascript">"

>> C'est fini ça. Dorénavant, on déclare par <script type="text/javascript">

"htm+="<tr><td style=\"width:100%\"><table border='0' cellspacing='0' cellpadding='0' style=\"width:100%\" class=\"SLCjournee\" >"; "

>> Un coup tu utilises les CSS, un coup non...

>> Déclare ton doctype

>> Tes méthodes commencent à dater...

"<br><br><br> "

>> Heureusement que tu n'a pas à faire un espacement d'une demie page...

signaler à un administrateur
Commentaire de ralecul le 05/07/2008 11:45:57

XtremDuke : "Faut essayer d'arrêter de construire tout avec l'innerHTML. Essai de construire ton document via le DOM."
>> Je viens de refaire le DOM Builder de Prototype et j'en ai profité pour faire un petit benchmark.
Et bien à mon grand regret innerHTML et presque 10x plus rapide que la méthode DOM classique.
Et ces proportions changent beaucoup entre les différents navigateurs (Safari étant le plus rapide en DOM à ma grande surprise)

En plus des différences de performance, la méthode DOM a le désavantage de ne pas être cross-browser sans l'ajout d'un DOM Builder (encore et toujours à cause de IE, sniff...). Donc sans DOM Builder la meilleure solution reste le innerHTML, avec un DOM Builder tout dépend si l'on ajoute énormément d'élément.

PS  : je posterais mon DOM Builder et le benchmark when it's done...

signaler à un administrateur
Commentaire de mickaelpfr le 05/07/2008 13:33:49

Je viens de refaire le DOM Builder de Prototype et j'en ai profité pour faire un petit benchmark.
Et bien à mon grand regret innerHTML et presque 10x plus rapide que la méthode DOM classique.

je suis intéressé pour voir ton code car niveau optimisation , je pense que tu fais fausse route , ( donc sans voir ton code je ne me prononcerais pas ... )

je suis partisan du dom , pour plein de raison :
- maintenance du code
- lisibilité
- COMPATIBILITE ( et si , malgré quelques adaptations ) il est beaucoup plus facile de passer par la construction d'éléments via le dom avec de minime différence ( comme tu le souligne avec un dom builder ) que de s'acharner a faire du innerHTML ... )

allez cessons de s'acharner sur un énième calendrier , la volonté était la :)

signaler à un administrateur
Commentaire de ffert le 07/07/2008 10:11:51

Nota : Web 3.0 devrait intégrer ce genre de "composants" en natif.
sous la forme : <input type="date" ...>


Nota bene : perso j'utilise ce calendrier là qui est génial : http://www.javascriptfr.com/code.aspx?ID=34725

salutations.

signaler à un administrateur
Commentaire de XtremDuke le 07/07/2008 15:16:13

"innerHTML et presque 10x plus rapide que la méthode DOM classique."

>> C'est a prendre avec des pincettes. Sous IE, c'est effectivement le cas, et même très largement le cas... C'est connu, IE a du mal a manipuler son propre DOM (suffit de voir un bench sur un 'getElementsByTagName'...). Cependant, sous les autres navigateurs (du moins testé sous Safari et Gecko), les différences ne sont pas aussi vertigineuses que tu le dis. En créent un millier de tableau, j'obtiens un petit 78ms en DOM Core contre 48ms en innerHTML. Je précise que c'est pour UN MILLIER de tableaux !

signaler à un administrateur
Commentaire de amrounix le 08/07/2008 09:27:44

HeLLo !
Et bien merci pour ces commentaires, il faut savoir accepter la critique pour avancer ! c'est vrai que "ultimate calendar" ca fait un peu prétentieux, c'est juste que j'ai du réécrire au moins une dixaine de fois ce code, avec tout plein de variante...
je métrise pas trop le DOM, mais je suis un grand bidouilleur, là j'ai réécrit mon programme (une fois de plus) sous cette technologie (plus de innerHTML !) mais j'ai un problème sous IE, je n'arrive pas à afficher le calendrier et je ne vois pas où se trouve le problème ??? (peut être à cause du tbody dans le table...je me pencherai dessus ce soir)
Et concernant DOM vs INNERHTML, si il n'y a que 30ms d'écart pour un millier de tableau, ca n'impactera pas sur le fonctionnement du programme, bien que je sois un partisan du innerHTML, faut savoir avancer et basculer en DOM !
sinon toujours aussi bordélique mon code ?

@+

signaler à un administrateur
Commentaire de amrounix le 08/07/2008 11:31:49

merci a FFERT pour ton idée, je l'ai implémenté et ca marche !
if suffit d'ajouter au onload :
new SLCcal(); pour rechercher tout les type = "date" et attribué un calendrier (même les input sans id)
ou bien new SLCcal(param); avec param = new parametre(); pour appliqué un paramétrage spécifique au type = date

signaler à un administrateur
Commentaire de mickaelpfr le 08/07/2008 16:31:26

non mais lol même ton titre ...
malgré une source plus propre ...

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Une question pour mon calendrier [ par syltouille ] Bonjour et bonne annee tout le monde.Mon premier souci de cette annee est:J'ai realise un calendrier en PHP avec des images pour chaque jour.- Je voud agenda calendrier [ par viperleparrain ] bon voial mon probleme sur mon site je veux integrer un calendrier de match pour indiquer&nbsp; kan on joue a kel heure un calendrier simple et foncti Calendrier- agenda modifiable [ par xaver ] Bonjourje suis &#224; la recherche d'un script pour obtenir un agenda-calendrier de m&#234;me design que l'agenda perp&#233;tuel&nbsp; mais avec l'opt Click sur une date du calendrier [ par fionalabelle ] Bonjour &#224; tous, <P class recherche calendrier [ par makinator7266 ] Bonjour à tous et toutes, je suis à la recherche d'un calendrier qui me permette d'afficher une fenêtre pop-up indiquant l'évenement correspondant à l Fermeture de popup et envoi d'informations [ par Rankin ] Salut &#224; tous. Je bosse actuellement sur la r&#233;alisation d'un site, qui contient une partie administration pour g&#233;rer des bases de donn& Gérer un agenda en Javascript en récupérant des dates SQL [ par Sp6men000 ] Bonjour,Je suis actuellement en phase de développement d'un site internet. Il utilise une base de donnée SQL qui posséde une table de la forme: table Recupérer la date depui un calendrier [ par lebasketeur ] bonjour tout le monde,Au cours de mon premier projet en php/mysql, j'ai rencontré quelque problème, si vous pouvez bien m'aider...Dans un formulaire d Détecter le changement d'un texte [ par fregolo52 ] Bonjour,Je ne sais pas si c'est possible, mais j'aimerais détecter la changement de la valeur d'un texte.Je m'explique, j'ai 2 INPUT qui représentent PHP + JS pour une pop ouverte une fois par visite [ par baldy ] BonjourJ'ai crée une simple pop up sur le site d'un client en fonction du nombre de nouveautés parmi ses produits//enregistrement de la date du jour


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Appels d'offres

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,374 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.