En cherchant sur google, on trouve très rapidement des contrôleurs prêts à l'emploi mais leur utilisation via l'ouverture d'une fenêtre ou d'un div ne me plaît pas toujours.
Ce que je voulais, c'était plutôt une fonction PHP facile à appeler et qui offre un contrôleur simple à utiliser et qui me permette de changer la date, le mois et le jour avec la même simplicité/rapidité.
Je me suis donc retroussé les manches et vous présente ici le résultat de mes efforts.
Le contrôleur se présente comme ceci :
Le code est englobé dans deux méthodes PHP.
La première contient des fonctions javascript communes.
La seconde permet de créer le code html de mon contrôleur.
L'appel se déroule comme ceci :
<? // Fonctions communes
CalendarJS();
//Creation de deux controleursVoici le code de la méthode GetCalendar() :
GetCalendar("date1", "2010-07-28");
GetCalendar("date2", "2012-02-16");
?>
<? function GetCalendar($nom,$valeur){?>L'INPUT visible est mis en disabled=true ce qui oblige à créer un clône invisible qui, lui, sera visible dans le POST de votre formulaire html.
<TABLE border="0" cellpadding="0" cellspacing="2">
<TR>
<TD><img src="../images/plus.jpeg" onclick="Add('<?=$nom?>',1)"></TD>
<TD><img src="../images/plus.jpeg" onclick="Add('<?=$nom?>',2)"></TD>
<TD><img src="../images/plus.jpeg" onclick="Add('<?=$nom?>',3)"></TD>
</TR>
<TR>
<TD colspan="3">
<INPUT type="hidden" name="<?=$nom?>" id="<?=$nom?>hidden" value="<?=$valeur?>">
<INPUT type="text" id="<?=$nom?>" maxlength="10" size="10" value="<?=$valeur?>" disabled="true">
</TD>
</TR>
<TR>
<TD><img src="../images/moins.jpeg" onclick="Sub('<?=$nom?>',1)"></TD>
<TD><img src="../images/moins.jpeg" onclick="Sub('<?=$nom?>',2)"></TD>
<TD><img src="../images/moins.jpeg" onclick="Sub('<?=$nom?>',3)"></TD>
</TR>
</TABLE>
<? }?>
Voici le code de la méthode CalendarJS() :
<? function CalendarJS(){?>
<SCRIPT>
// Fonction qui permet d'ajouter soit une annee, un mois ou un jour a notre controleur de date
function Add(objet, champ){
// Lecture de la valeur date
valeur = document.getElementById(objet).value;
// Decoupage des champs et convertion des valeurs en entier
annee = parseInt(valeur.substring(0,4));
if(valeur.substring(5,7)=="08") mois=8; // bug javascript
else if(valeur.substring(5,7)=="09") mois=9; // bug javascript
else mois = parseInt(valeur.substring(5,7));
if(valeur.substring(8,10)=="08") jour=8; // bug javascript
else if(valeur.substring(8,10)=="09") jour=9; // bug javascript
else jour = parseInt(valeur.substring(8,10));
switch(champ){
case 1:
// ajouter une annee
annee++;
// cas des annees bisextiles
// On evite d'arriver a des situations du genre 2012-02-29 + 1 an = 2013-02-29
if(mois==2 && jour>28) jour=28;
break;
case 2:
// ajouter un mois (si on est decembre, on incremente l'annee)
if(mois==12){
annee++;
mois=1;
} else mois++;
// On evite d'arriver a des situations du genre 2012-01-30 + 1 mois = 2012-02-30
if(mois==4 || mois==6 || mois==9 || mois==11){
if(jour>30) jour=30;
} else if(mois==2) {if(jour>28) jour=28;}
break;
case 3:
// ajouter un jour
if(mois==1 || mois ==3 || mois==5 || mois==7 || mois==8 || mois==10 || mois==12){
// cas des mois en 31 jour
if(jour==31){
// on passe du 31 du mois au 1er du mois suivant
jour=1;
if(mois==12){
mois=1;
annee++;
} else mois++;
} else jour++;
} else if(mois==4 || mois==6 || mois==9 || mois==11){
// cas des mois en 30 jour
if(jour==30){
// on passe du 30 du mois au 1er du mois suivant
jour=1;
if(mois==12){
mois=1;
annee++;
} else mois++;
} else jour++;
} else if(mois==2){
// cas de fevrier
if(annee % 4 == 0) {
// si annee bissextile
if(jour==29){
// on passe du 29 fevrier au 1er mars
jour=1;
mois=3;
} else jour++;
} else {
if(jour==28){
// on passe du 28 fevrier au 1er mars
jour=1;
mois=3;
} else jour++;
}
}
break;
}
// Conversion des resultats en chaine de caracteres
sannee = annee.toString();
smois = mois.toString();
if(smois.length==1) smois="0"+smois;
sjour = jour.toString();
if(sjour.length==1) sjour="0"+sjour;
// on re-injecter les valeur dans le champ date et son champ cache
document.getElementById(objet).value = sannee+"-"+smois+"-"+sjour;
document.getElementById(objet+"hidden").value = sannee+"-"+smois+"-"+sjour;
}
// Fonction qui permet de retirer soit une annee, un mois ou un jour a notre controleur de date
function Sub(objet, champ, valeur){
// Lecture de la valeur date
valeur = document.getElementById(objet).value;
// Decoupage des champs et convertion des valeurs en entier
annee = parseInt(valeur.substring(0,4));
if(valeur.substring(5,7)=="08") mois=8; // bug javascript
else if(valeur.substring(5,7)=="09") mois=9; // bug javascript
else mois = parseInt(valeur.substring(5,7));
if(valeur.substring(8,10)=="08") jour=8; // bug javascript
else if(valeur.substring(8,10)=="09") jour=9; // bug javascript
else jour = parseInt(valeur.substring(8,10));
switch(champ){
case 1:
// retirer une annee
annee--;
// cas des annees bisextiles
// On evite d'arriver a des situations du genre 2012-02-29 - 1 an = 2011-02-29
if(mois==2 && jour>28) jour=28;
break;
case 2:
// retirer un mois (si on est janvier, on decremente l'annee)
if(mois==1){
annee--;
mois=12;
} else {
mois--;
}
// On evite d'arriver a des situations du genre 2012-03-30 - 1 mois = 2012-02-30
if(mois==4 || mois==6 || mois==9 || mois==11){
if(jour>30) jour=30;
} else if(mois==2) {if(jour>28) jour=28;}
break;
case 3:
// retirer un jour
if(mois==2 || mois ==4 || mois==6 || mois==8 || mois==9 || mois==11 || mois==1){
// cas des mois qui suivent un mois en 31 jour
if(jour==1){
// on passe du 1er du mois au 31 du mois precedent
jour=31;
if(mois==1){
mois=12;
annee--;
} else mois--;
} else jour--;
} else if(mois==5 || mois==7 || mois==10 || mois==12){
// cas des mois qui suivent un mois en 30 jour
if(jour==1){
// on passe du 1er du mois au 30 du mois precedent
jour=30;
if(mois==1){
mois=12;
annee--;
} else mois--;
} else jour--;
} else if(mois==3){
// cas de fevrier
if(annee % 4 == 0){
// si annee bissextile
if(jour==1){
// on passe du 1er mars au 29 fevrier
jour=29;
mois=2;
} else jour--;
} else {
if(jour==1){
// on passe du 1er mars au 28 fevrier
jour=28;
mois=2;
} else jour--;
}
}
break;
}
sannee = annee.toString();
smois = mois.toString();
if(smois.length==1) smois="0"+smois;
sjour = jour.toString();
if(sjour.length==1) sjour="0"+sjour;
document.getElementById(objet).value = sannee+"-"+smois+"-"+sjour;
document.getElementById(objet+"hidden").value = sannee+"-"+smois+"-"+sjour;
}
</SCRIPT>
<? }?>
Libre à vous d'utiliser ce bout de code et de l'adapter à vos besoins.
Aucun commentaire:
Enregistrer un commentaire