Calendrier : assistant de saisie de date dans un formulaire

Soyez le premier à donner votre avis sur cette source.

Vue 60 316 fois - Téléchargée 5 450 fois

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

Ajouter un commentaire

Commentaires

Signaler
mizushima
Messages postés
27
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
5 janvier 2020
// ON OUBLIE LA FORMULE DE ZELLER !
// il y a des fonctions en php qui font ça très bien : mktime et strtotime

// choisir comment construire le contenu de la variable qu'on va traiter par ces fonctions

// $date_strtotime = mktime(21, 52, 0, 2, 10, 96); // 21h 52mn 0s 2eme-mois 10eme-jour année
// $date_strtotime = strtotime("10 February 1996 21:52");
// $date_strtotime = strtotime("1996-02-10 21:52");

// je prends l'exemple avec les variables du script ici et la 2e version de strtotime en chiffres
// admettons que l'on récupère les variables
// $listJour = 15
// $listMois = 012007

// il faut d'abord dissocier le mois de l'année
// on récupère les 2 premiers chiffres de la chaine $listMois avec la fonction substr
$mois = substr($listMois, 0, 2)
// ça donne $mois = 01

// puis les 4 derniers chiffres pour l'année
$annee = substr($listMois, 2, 4)
// ça donne $annee = 2007

// on colle tout ça en concaténation pour respecter le format de strtotime("1996-02-10 21:52")
$formate_date = $annee.'-'.$mois.'-'$listJour.' 00:00';
// si on omet l'heure 00:00 ça fonctionne aussi dans une certaine mesure

// puis on traite avec la fonction magique strtotime

$date_strtotime = strtotime($formate_date);

// maintenant la variable $date_strtotime est un tableau
// qui contient peut-être toutes les valeurs de la foncton date()
// voir sur http://fr2.php.net/manual/fr/function.date.php
// j'ai pas tout testé :-)
// comme par exemple

$jour_numerique = date("d", $date_strtotime);
$mois_numerique = date("m", $date_strtotime);
$annee_4_chiffres = date("Y", $date_strtotime);

// et donc ce qui nous intéresse le plus, le jour de la semaine en anglais, YOUPI !

$joursemaine_anglais = date("D", $date_strtotime);

// $joursemaine_anglais aura alors une de ces valeurs :
// Mon, Tue, Wed, Thu, Fri, Sat ou Sun
// il suffit d'un array pour convertir en français
$convertjoursemaine_en_fr array ('Mon'> 'Lu.', 'Tue' => 'Ma.', 'Wed' => 'Me.', 'Thu' => 'Je.', 'Fri' => 'Ve.', 'Sat' => 'Sa.', 'Sun' => 'Di.');

// à la place de 'Lu.' 'Ma.' ...etc on pourrait bien sûr mettre 'Lundi' "Mardi'

$joursemaine_fr = $convertjoursemaine_en_fr[$joursemaine_anglais];

// et on affiche le tout

echo $joursemaine_fr.''.$jour_numerique.''.$mois_numerique.''.$annee_4_chiffres;

// soit : Lu. 15 01 2007

// merci à Dany qui m'a donné le tuyau ;-)
Signaler
arnal69130
Messages postés
445
Date d'inscription
lundi 17 février 2003
Statut
Membre
Dernière intervention
22 mars 2007
 1
Et la formule de Zeller dont tu parlais dans ton post du 17/10/06 ?
Signaler
mizushima
Messages postés
27
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
5 janvier 2020
dans mon post du 15/10/2006 21:28:19 je demandais en 2°
comment récupérer dans le menu déroulant de la page index.php aussi le jour de la semaine pour le conserver avec la date dans la base
(parce que je trouve important de savoir quel jour de la semaine tombe une date, si tu me demande si je suis libre le 22 mars 2012 je te demande : "ça tombe quel jour de la semaine ?")

j'ai trouvé un site qui le fait,
celui des chemins de fer Belges
http://www.b-rail.be/main/F/

tu veux aller de
gare/arrêt : bruxelles
à
gare/arrêt : Geraardsbergen

tu laisses par défaut la date et le reste et tu cliques sur [RECHERCHER]

et oh miracle sur la page de confirmation on peut voir
date : Je, 11/09/08

donc avec le jour de la semaine,
il y a un petit calendrier dans une popup comme dans le script ici
et si je clique sur 12 septembre j'ai
date : Ve, 12/09/08

donc C'EST POSSIBLE JE VEUX CE SCRIPT ! :-))))))
Signaler
mizushima
Messages postés
27
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
5 janvier 2020
bon alors puisque les codes de caractères spéciaux ne sont pas interprétés ici je redonne
le bon code php pour $convertmois
$convertmois array ("01"> "janv.", "02" => "fév.", "03" => "mars", "04" => "avril", "05" => "mai", "06" => "juin", "07" => "juil.", "08" => "août", "09" => "sept.", "10" => "oct.", "11" => "nov.", "12" => "déc.");
Signaler
mizushima
Messages postés
27
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
5 janvier 2020
Réponse à la question de serialmother le 11/02/2007 21:05:45
"la date avec un espace entre le mois et l'année ou avec le mois en lettres."

en php c'est un jeu d'enfant, c'est la variable $listMois qui renvoie le mois et l'année collés ensemble,
donc déjà cette variable est mal nommée.

Il faut pour commencer une variable array (à plusieurs cases)
$convertmois array ("01"> "janv.", "02" => "fév.", "03" => "mars", "04" => "avril", "05" => "mai", "06" => "juin", "07" => "juil.", "08" => "août", "09" => "sept.", "10" => "oct.", "11" => "nov.", "12" => "déc.");

puis on extrait les deux partie qui nous intéressent dans la variable $listMois

si $listMois = 012007
01 c'est le mois donc le morceau de chaîne de caractère à partir de la position 0 (c'est à dire le premier caractère)
et d'une longueur de 2 carctères

$moisdate = substr($listMois, 0, 2);

2007 c'est l'année, le morceau de chaîne à partir de la position 2 (3e caractère)
et d'une longueur de 4 caractères

$anneedate = substr($listMois, 2, 4);

donc dans notre exemple

$moisdate vaut 01
$anneedate vaut 2007

pour afficher le mois en lettres

echo $convertmois[$moisdate];

c'est à dire janv.

voilà
Afficher les 63 commentaires
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)