Calendrier : assistant de saisie de date dans un formulaire

Télécharger le projet
Commenter

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 / Exemple : 


<?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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (arnal69130)