|
Trouver une ressource
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 !
CALENDRIER : ASSISTANT DE SAISIE DE DATE DANS UN FORMULAIRE
Information sur la source
Description
Calendrier complet, avec interaction dans un formulaire. Très simple à utiliser : Un formulaire php (index.php) avec 2 listes déroulantes (jours et mois) et un lien pour ouvrir le calendrier en popup (calend.php). En cliquant sur un jour du calendrier, les champs sont automatiquement mis à jour. J'utilises pas mal de javascript. Testé sous IE et FireFox. Arn;o)
Source
- <?php /*************** INDEX.PHP ****************/
- function Mois_fr($mon) //retourne le mois en lettre en français
- { setlocale(LC_TIME,""); return ucfirst(strftime("%B",strtotime("2002".sprintf("%02d",$mon)."01"))); }
-
- //mois et année actuels
- $anR=date("Y");
- $mm=date("m");
-
- //liste des jours du mois
- $chListJ='';
- for ($i=1; $i<=31; $i++) $chListJ.=sprintf("<option>%02d</option>",$i);
-
- //liste des mois de la période
- $chListM='<optgroup label="'.$anR.'">';
- for ($m=1; $m<=24; $m++)
- {
- if ($mm==13) { $mm=1; $anR++; $chListM.= '</optgroup><optgroup label="'.$anR.'">';}
- $chListM.= '<option value="'.sprintf("%02d",$mm).$anR.'">'.Mois_fr($mm).' '.$anR.'</option>';
- $mm++;
- }
- $chListM.= '</optgroup>';
- ?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
- <head>
- <title>Choix date</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <style type="text/css">
- form {
- border-style:ridge;
- border-width:2px;
- padding:10px;
- margin:10px;
- width:180px;
- position:absolute;
- }
- label {
- font-family:Arial,sans-serif;
- font-size:9pt;
- position:absolute;
- top:-10px;
- left:2px;
- background-color:white;
- padding:1px;
- }
- #listJour {
- font-size:10px;
- height:16px;
- }
- #listMois {
- font-size:10px;
- height:16px;
- width:110px;
- }
- #imgCalend {
- border-width:0px;
- position:relative;
- top:4px;
- }
- </style>
- <script type="text/javascript">
- //ouverture popup
- function Calendrier(dated)
- {
- var h=133; var w=130;
- var chParam="resizable=no, location=no, menubar=no, directories=no, scrollbars=no, status=no, ";
- chParam+='width='+w+', height='+h+', left=200, top=270';
- FenCalend=window.open('calend.php?d='+dated, 'FenCalend', chParam);
- }
-
- //remplissage de la liste des jours en fonction du mois sélectionné dans la liste
- function AffNbj()
- {
- var m=document.getElementById("listMois").options[document.getElementById("listMois").selectedIndex].value;
- var d = new Date(m.substr(2,4),m.substr(0,2),0);
- var nbj=d.getDate();
- var i,j,o,sel;
- sel=document.getElementById("listJour").options.selectedIndex;
- //vidage de la liste
- document.getElementById("listJour").length=0;
- for (i=1;i<=nbj;i++)
- {
- j=i.toString();
- if (j.length<2) { j="0"+j; }
- //création des options
- o=new Option(j,j);
- document.getElementById("listJour").options[document.getElementById("listJour").options.length]=o;
- }
- //sélection du jour en cours
- if ( (sel>0) && (document.getElementById("listJour").options[sel]) )
- { document.getElementById("listJour").options[sel].selected = 1; }
- }
-
- //cherche et sélectionne la date du jour dans les listes
- function dateDansListe()
- {
- d=new Date();
- Mois=1+d.getMonth();
- chM=Mois.toString();
- if (chM.length<2) { chM="0"+chM; }
- An=d.getFullYear();
- ch=chM+An.toString();
- i=0;
- while(ch!=document.getElementById("listMois").options[i].value)
- { i++; }
- j=d.getDate();
- if (document.getElementById("listMois").options[i]) document.getElementById("listMois").options[i].selected = 1;
- if (document.getElementById("listJour").options[j-1]) document.getElementById("listJour").options[j-1].selected = 1;
- AffNbj();
- }
- </script>
- </head>
- <body>
- <!-- formulaire -->
- <form name="formInsert" id="formInsert" method="post" action="index.php">
- <label for="listJour">Choix de date</label>
- <select id="listJour" name="listJour"><?php echo $chListJ;?></select>
- <select id="listMois" name="listMois"><?php echo $chListM;?></select>
- <a class="lienCal" id="Calend" href="#" title="Calendrier">
- <img id="imgCalend" src="BCalend.gif" alt="Calendrier" /></a>
- </form>
- <script type="text/javascript">
- AffNbj();
- dateDansListe();
- //le champ jour se rafraichit automatiquement à la sélection d'un mois
- document.getElementById("listMois").onchange=function () { AffNbj(); }
- //lien calendrier
- document.getElementById("Calend").onclick=function()
- {
- j=document.getElementById('listJour').selectedIndex+1;
- j=j.toString();
- if (j.length<2) { j="0"+j; }
- m=document.getElementById('listMois').value.toString();
- d=m.substr(2,4)+m.substr(0,2)+j;
- //on passe en paramètre la date en cours
- Calendrier(d);
- }
- </script>
- </body>
- </html>
- <?php /*************** CALEND.PHP ****************/
- function Mois_fr($mon) //retourne le mois en lettre en français
- { setlocale(LC_TIME,""); return ucfirst(strftime("%B",strtotime("2002".sprintf("%02d",$mon)."01"))); }
-
- //lecture de la date passée en paramamètre
- //à l'ouverture de la popup, la date est passé en get
- //lors du rechargement de la page elle est passée en post
- if (empty($_GET["d"]))
- {
- if (empty($_POST))
- { $d=date("Ymd"); }
- else
- {
- $m=$_POST["Mois"];
- $d=substr($m,2,4).substr($m,0,2).$_POST["jour"];
- }
- }
- else { $d=$_GET["d"]; }
-
- //lecture des jour, mois, année, nb jours du mois, et jour dans la semaine du 1er du mois
- $jour=substr($d,6,2); $mois=substr($d,4,2); $an=substr($d,0,4);
- $nbj=strftime("%d",mktime(8,0,0,$mois+1,0,$an));
- $d1j=strftime("%w",strtotime($an.$mois."01"));
- if ($d1j==0) $d1j=7;
-
- //mois et année actuels
- $anR=date("Y");
- $mm=date("m");
-
- //liste des mois de la période
- $chListM='<optgroup label="'.$anR.'">';
- for ($m=1; $m<=24; $m++)
- {
- if ($mm==13) { $mm=1; $anR++; $chListM.= '</optgroup><optgroup label="'.$anR.'">';}
- $chListM.= '<option value="'.sprintf("%02d",$mm).$anR.'">'.Mois_fr($mm).' '.$anR.'</option>';
- $mm++;
- }
- $chListM.= '</optgroup>';?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
- <head>
- <title>CALENDRIER</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <style type="text/css">
- body { margin:1px; }
- form { margin:0px; padding:0px; }
- .Jsem { background-color:#9DCCDB; width:14.29%; font-size:10px; font-weight:normal; }
- .cellCal { font-size:10px; background-color:white }
- #tablCalend { font-size:10; font-family:Arial; text-align:center; width:100%; background-color:#000000; }
- #Mois { font-size:10px; width:130px; }
- a.lienCal { text-decoration:none; font-weight:normal; }
- a.lienCal:link { color:#000000; }
- a.lienCal:visited { color:#000000; }
- a.lienCal:hover { color:#0000E0; }
- a.lienCal:active { color:#0000E0; }
- a.lienCal:focus { color:#0000E0; }
- a.lienCal1 { text-decoration:none; font-weight:normal; }
- a.lienCal1:link { color:#FF0000; }
- a.lienCal1:visited { color:#FF0000; }
- a.lienCal1:hover { color:#CC00FF; }
- a.lienCal1:active { color:#CC00FF; }
- a.lienCal1:focus { color:#CC00FF; }
- a:link { color:#000000; }
- a:visited { color:#000000; }
- a:hover { color:#0000E0; }
- a:active { color:#0000E0; }
- a:focus { color:#0000E0; }
- </style>
- <script type="text/javascript"><!--
- function clavier(n) //Echap => ferme la popup
- {if (n==27) {this.close();} }
-
- function lien(j) //lien qui sélectionne la date dans le formulaire de la fenêtre appelante
- {
- window.opener.document.getElementById('listMois').options[document.getElementById('Mois').selectedIndex].selected = 1;
- window.opener.AffNbj('');
- window.opener.document.getElementById('listJour').options[j].selected = 1;
- window.close();
- }
- --></script>
- </head>
- <body onkeydown="clavier(event.keyCode);">
- <form method="post" name="formMois" action="calend.php">
- <input type="hidden" name="jour" value="<?php echo $jour;?>" />
- <select name="Mois" id="Mois" onchange="document.formMois.submit();"><?php echo $chListM;?></select>
- </form>
- <!-- tableau -->
- <table id="tablCalend" cellspacing="1">
- <tr>
- <?php //ligne d'entête
- for ($i=1; $i<=7; $i++)
- { echo '<th class="Jsem">',substr(ucfirst(strftime("%A",strtotime("200408".sprintf("%02d",$i+1)))),0,2),'</th>'; }
- echo '</tr>';
- $j=0;
- $jsem=0;
- //construction du tableau
- for ($c=1; $c<=42; $c++) //il peut y avoir 6 semaines dans un mois (cf mai 2005) => 6*7=42 cases
- {
- if (fmod(($c-1),7)==0) { echo '<tr>'; } //si colonne précédente multiple de 7 => nouvelle ligne
- $jsem++;//jour de la semaine
- echo '<td class="cellCal" id="cell',$c,'">';
- if ($c==$d1j) { $j=1; }
- $jj=sprintf("%02d",$j);
- if ($c >= $d1j)//jour dans la semaine du 1er du mois
- {
- if ($j<=$nbj)//nb jours du mois
- {
- $titre=ucfirst(strftime("%A",strtotime("200408".sprintf("%02d",$jsem+1))))." $jj/$mois/$an";
- echo '<a title="',$titre,'" href="javascript:lien(',($j-1),');" class="lienCal',($j==$jour),'">',$j,'</a>';
- }
- else { echo '<br />'; }
- $j++;
- }
- echo '</td>';
- if (fmod($c,7)==0) { echo '</tr>'; $jsem=0; } //si colonne en cours multiple de 7 => fin de ligne
- }
- echo '</table>';
- echo '<script type="text/javascript">';//recherche le mois en cours et le sélectionne dans la liste
- echo 'var i=0;';
- echo 'while(document.getElementById("Mois").options[i].value!="',$mois,$an,'") {i++;}';
- echo 'document.getElementById("Mois").options[i].selected = 1;';
- echo 'document.getElementById("Mois").focus();';
- echo '</script>';?>
- </body>
- </html>
<?php /*************** INDEX.PHP ****************/
function Mois_fr($mon) //retourne le mois en lettre en français
{ setlocale(LC_TIME,""); return ucfirst(strftime("%B",strtotime("2002".sprintf("%02d",$mon)."01"))); }
//mois et année actuels
$anR=date("Y");
$mm=date("m");
//liste des jours du mois
$chListJ='';
for ($i=1; $i<=31; $i++) $chListJ.=sprintf("<option>%02d</option>",$i);
//liste des mois de la période
$chListM='<optgroup label="'.$anR.'">';
for ($m=1; $m<=24; $m++)
{
if ($mm==13) { $mm=1; $anR++; $chListM.= '</optgroup><optgroup label="'.$anR.'">';}
$chListM.= '<option value="'.sprintf("%02d",$mm).$anR.'">'.Mois_fr($mm).' '.$anR.'</option>';
$mm++;
}
$chListM.= '</optgroup>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Choix date</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
form {
border-style:ridge;
border-width:2px;
padding:10px;
margin:10px;
width:180px;
position:absolute;
}
label {
font-family:Arial,sans-serif;
font-size:9pt;
position:absolute;
top:-10px;
left:2px;
background-color:white;
padding:1px;
}
#listJour {
font-size:10px;
height:16px;
}
#listMois {
font-size:10px;
height:16px;
width:110px;
}
#imgCalend {
border-width:0px;
position:relative;
top:4px;
}
</style>
<script type="text/javascript">
//ouverture popup
function Calendrier(dated)
{
var h=133; var w=130;
var chParam="resizable=no, location=no, menubar=no, directories=no, scrollbars=no, status=no, ";
chParam+='width='+w+', height='+h+', left=200, top=270';
FenCalend=window.open('calend.php?d='+dated, 'FenCalend', chParam);
}
//remplissage de la liste des jours en fonction du mois sélectionné dans la liste
function AffNbj()
{
var m=document.getElementById("listMois").options[document.getElementById("listMois").selectedIndex].value;
var d = new Date(m.substr(2,4),m.substr(0,2),0);
var nbj=d.getDate();
var i,j,o,sel;
sel=document.getElementById("listJour").options.selectedIndex;
//vidage de la liste
document.getElementById("listJour").length=0;
for (i=1;i<=nbj;i++)
{
j=i.toString();
if (j.length<2) { j="0"+j; }
//création des options
o=new Option(j,j);
document.getElementById("listJour").options[document.getElementById("listJour").options.length]=o;
}
//sélection du jour en cours
if ( (sel>0) && (document.getElementById("listJour").options[sel]) )
{ document.getElementById("listJour").options[sel].selected = 1; }
}
//cherche et sélectionne la date du jour dans les listes
function dateDansListe()
{
d=new Date();
Mois=1+d.getMonth();
chM=Mois.toString();
if (chM.length<2) { chM="0"+chM; }
An=d.getFullYear();
ch=chM+An.toString();
i=0;
while(ch!=document.getElementById("listMois").options[i].value)
{ i++; }
j=d.getDate();
if (document.getElementById("listMois").options[i]) document.getElementById("listMois").options[i].selected = 1;
if (document.getElementById("listJour").options[j-1]) document.getElementById("listJour").options[j-1].selected = 1;
AffNbj();
}
</script>
</head>
<body>
<!-- formulaire -->
<form name="formInsert" id="formInsert" method="post" action="index.php">
<label for="listJour">Choix de date</label>
<select id="listJour" name="listJour"><?php echo $chListJ;?></select>
<select id="listMois" name="listMois"><?php echo $chListM;?></select>
<a class="lienCal" id="Calend" href="#" title="Calendrier">
<img id="imgCalend" src="BCalend.gif" alt="Calendrier" /></a>
</form>
<script type="text/javascript">
AffNbj();
dateDansListe();
//le champ jour se rafraichit automatiquement à la sélection d'un mois
document.getElementById("listMois").onchange=function () { AffNbj(); }
//lien calendrier
document.getElementById("Calend").onclick=function()
{
j=document.getElementById('listJour').selectedIndex+1;
j=j.toString();
if (j.length<2) { j="0"+j; }
m=document.getElementById('listMois').value.toString();
d=m.substr(2,4)+m.substr(0,2)+j;
//on passe en paramètre la date en cours
Calendrier(d);
}
</script>
</body>
</html>
<?php /*************** CALEND.PHP ****************/
function Mois_fr($mon) //retourne le mois en lettre en français
{ setlocale(LC_TIME,""); return ucfirst(strftime("%B",strtotime("2002".sprintf("%02d",$mon)."01"))); }
//lecture de la date passée en paramamètre
//à l'ouverture de la popup, la date est passé en get
//lors du rechargement de la page elle est passée en post
if (empty($_GET["d"]))
{
if (empty($_POST))
{ $d=date("Ymd"); }
else
{
$m=$_POST["Mois"];
$d=substr($m,2,4).substr($m,0,2).$_POST["jour"];
}
}
else { $d=$_GET["d"]; }
//lecture des jour, mois, année, nb jours du mois, et jour dans la semaine du 1er du mois
$jour=substr($d,6,2); $mois=substr($d,4,2); $an=substr($d,0,4);
$nbj=strftime("%d",mktime(8,0,0,$mois+1,0,$an));
$d1j=strftime("%w",strtotime($an.$mois."01"));
if ($d1j==0) $d1j=7;
//mois et année actuels
$anR=date("Y");
$mm=date("m");
//liste des mois de la période
$chListM='<optgroup label="'.$anR.'">';
for ($m=1; $m<=24; $m++)
{
if ($mm==13) { $mm=1; $anR++; $chListM.= '</optgroup><optgroup label="'.$anR.'">';}
$chListM.= '<option value="'.sprintf("%02d",$mm).$anR.'">'.Mois_fr($mm).' '.$anR.'</option>';
$mm++;
}
$chListM.= '</optgroup>';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>CALENDRIER</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin:1px; }
form { margin:0px; padding:0px; }
.Jsem { background-color:#9DCCDB; width:14.29%; font-size:10px; font-weight:normal; }
.cellCal { font-size:10px; background-color:white }
#tablCalend { font-size:10; font-family:Arial; text-align:center; width:100%; background-color:#000000; }
#Mois { font-size:10px; width:130px; }
a.lienCal { text-decoration:none; font-weight:normal; }
a.lienCal:link { color:#000000; }
a.lienCal:visited { color:#000000; }
a.lienCal:hover { color:#0000E0; }
a.lienCal:active { color:#0000E0; }
a.lienCal:focus { color:#0000E0; }
a.lienCal1 { text-decoration:none; font-weight:normal; }
a.lienCal1:link { color:#FF0000; }
a.lienCal1:visited { color:#FF0000; }
a.lienCal1:hover { color:#CC00FF; }
a.lienCal1:active { color:#CC00FF; }
a.lienCal1:focus { color:#CC00FF; }
a:link { color:#000000; }
a:visited { color:#000000; }
a:hover { color:#0000E0; }
a:active { color:#0000E0; }
a:focus { color:#0000E0; }
</style>
<script type="text/javascript"><!--
function clavier(n) //Echap => ferme la popup
{if (n==27) {this.close();} }
function lien(j) //lien qui sélectionne la date dans le formulaire de la fenêtre appelante
{
window.opener.document.getElementById('listMois').options[document.getElementById('Mois').selectedIndex].selected = 1;
window.opener.AffNbj('');
window.opener.document.getElementById('listJour').options[j].selected = 1;
window.close();
}
--></script>
</head>
<body onkeydown="clavier(event.keyCode);">
<form method="post" name="formMois" action="calend.php">
<input type="hidden" name="jour" value="<?php echo $jour;?>" />
<select name="Mois" id="Mois" onchange="document.formMois.submit();"><?php echo $chListM;?></select>
</form>
<!-- tableau -->
<table id="tablCalend" cellspacing="1">
<tr>
<?php //ligne d'entête
for ($i=1; $i<=7; $i++)
{ echo '<th class="Jsem">',substr(ucfirst(strftime("%A",strtotime("200408".sprintf("%02d",$i+1)))),0,2),'</th>'; }
echo '</tr>';
$j=0;
$jsem=0;
//construction du tableau
for ($c=1; $c<=42; $c++) //il peut y avoir 6 semaines dans un mois (cf mai 2005) => 6*7=42 cases
{
if (fmod(($c-1),7)==0) { echo '<tr>'; } //si colonne précédente multiple de 7 => nouvelle ligne
$jsem++;//jour de la semaine
echo '<td class="cellCal" id="cell',$c,'">';
if ($c==$d1j) { $j=1; }
$jj=sprintf("%02d",$j);
if ($c >= $d1j)//jour dans la semaine du 1er du mois
{
if ($j<=$nbj)//nb jours du mois
{
$titre=ucfirst(strftime("%A",strtotime("200408".sprintf("%02d",$jsem+1))))." $jj/$mois/$an";
echo '<a title="',$titre,'" href="javascript:lien(',($j-1),');" class="lienCal',($j==$jour),'">',$j,'</a>';
}
else { echo '<br />'; }
$j++;
}
echo '</td>';
if (fmod($c,7)==0) { echo '</tr>'; $jsem=0; } //si colonne en cours multiple de 7 => fin de ligne
}
echo '</table>';
echo '<script type="text/javascript">';//recherche le mois en cours et le sélectionne dans la liste
echo 'var i=0;';
echo 'while(document.getElementById("Mois").options[i].value!="',$mois,$an,'") {i++;}';
echo 'document.getElementById("Mois").options[i].selected = 1;';
echo 'document.getElementById("Mois").focus();';
echo '</script>';?>
</body>
</html>
Conclusion
Le formulaire est à aranger à votre goût ! N'hésitez pas à poster vos commentaires.
Historique
- 15 mars 2005 18:09:14 :
- Suite aux conseils de stpibou :
- Remplacement des ' par des " dans les balises html
- ajout de commentaires
- clarification de l'alternance php / js ?
- 25 mars 2005 12:19:20 :
- Correction syntaxe echo.
Petite mise en forme du formulaire
- 25 mars 2005 12:24:02 :
- ajout NB dans la présentation.
- 11 juillet 2005 10:29:57 :
- Suppression du NB de l'intro car les fonctions js Date() et getDate() s'affichent maintenant bien avec un «d» majuscule.
- 26 juillet 2005 18:10:25 :
- ajout de l'image BCalend.gif dans le zip
Sources du même auteur
Sources de la même categorie
Sources en rapport avec celle ci
Commentaires et avis
|