Calendrier : assistant de saisie de date dans un formulaire

Soyez le premier à donner votre avis sur cette source.

Vue 60 010 fois - Téléchargée 5 424 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
stepibou
Messages postés
112
Date d'inscription
jeudi 11 mars 2004
Statut
Membre
Dernière intervention
11 octobre 2006
 -
hello arnal,

ca continue en php à ce que je vois,
c'est bien.

tu t'y connais pas mal en javascript, pas comme moi. ;-)

et c'est super cool, car c'est justemement ce que je cherchais, je galere en javascript, c un langage un peu chelou quand meme.

je veux ouvrir une popup, remplir un formulaire dans la popup ( avec upload), et l'envoyer dans la page principale, et fermer automatiquement la popup.
donc c un peu ce que tu fais sauf que t'as un calendrier, et non un formulaire dans ta popup.

j'ai essayé d'adapter un script tout nul et ca marche pas :
lien

<script language="Javascript">
function lien(url) {
eval("window.opener.parent.document.location.href='"+url'";");
window.close(); }
</script>

a metter dans le du lien:

onClick=lien('Page_a_appeler')

voila , donc si tu pouvais m'extraire de ta source, un script java et le reste, qui pourrai faire ca, avec dans la popup juste un bouton submit. ca serait tres sympas.

sinon je chercherai moi meme.

voila, sinon la source à l'aire tres bien. je noterai.

a+
Signaler
arnal69130
Messages postés
445
Date d'inscription
lundi 17 février 2003
Statut
Membre
Dernière intervention
22 mars 2007
 1 -
Salut Stepibou,
Si tu regardes d'un peu plus près mon calendrier, tu verras qu'il contient a un formulaire ;o)
Cela dit, dans ma source dans la popup on modifie la valeur d'un champ sur la page appelante.
Je ne suis pas sur que ce soit ça que tu veuilles faire, si ?

Dans ta popup, tu peux essayer de faire un formulaire avec action=popup, et au rechargement tu fermes la popup... ça donnerait un truc du genre :
/****popup.php****/
<?php
if (empty($_POST['ficUpload']))
{ echo "<form action='popup.php' ...>" formulaire d'upload..."; }
else
{ echo "<script type='text/javascript'>window.close();</script>"; }
?>
J'ai pas essayé, mais ça te permettera sans doute d'avancer...

Juste une petite suggestion, essaye d'écrire tes balises et attributs en minuscule, et avec des quotes autour des valeurs : [# ...]...

Au passage, il s'agit bien de javascript (et non pas de java qui n'a rien à voir) ;o) et les balises ouvrantes doivent être de la forme <script type="text/javascript">

a+
Arno
Signaler
stepibou
Messages postés
112
Date d'inscription
jeudi 11 mars 2004
Statut
Membre
Dernière intervention
11 octobre 2006
 -
un arnal , des arnox...
merci, c bon grace à toi, voici mon script :

je sais c du javascript, et on est sur phpcs, mais bon,
on peut malheureusement pas y echaper, les sources recentes le montre.

voila ca marche, mais je suis obligé de traiter le formulaire dans la popup. c'est mieux dans un sens car ca rafraichi la page principale : (pour ceux que ca interesse, ce script ouvre une popup, traite un formulaire dans la popup, et ferme automatiquement la popup...)

------script de la page principale : ------
[# inscrivez vous!]
<script type="text/javascript">
function Openpop() {
window.open('diaporama.php','Fenupload','toolbar=0,location=0,directories=0,status=0,scrollbars=0,resizable=1,copyhistory=0,menuBar=0,width=400,height=200'); }
</script>

------script de la popup : ------
<?php
traitement du formulaire... avec un if bien sure...
print("<script type='text/javascript'>\n");
print("window.close();
</script>");
?>
<head>
<script type='text/javascript'>
function lien() {
window.opener.parent.document.location.href='pageprincipale.php'; }
</script>
</head>

[javascript: window.opener.parent.document.location.href='pageprincipale.php';
window.close();
retour]
<form ...>

</form>

-----------------------------

tres bien, je te met 8 et pas 9, je t'explique pourquoi :
-dans tes balise html utilise des doubles quotes " et non '.
c'est mieux comme dirai grenard...
- le script marche mais je comprend pas tout y a pas de commentaire.
- et aussi y a des problemes dans l'insersion du javascript dans php : dans calend.php tu commence en javascript puis tu ouvre php à la ligne 44 alors que c le contraire c du javascript dans php. et surement encore des pbs de place de quotes,..

voila, bonne prog a tous <?php (o; !-) ?>
Signaler
arnal69130
Messages postés
445
Date d'inscription
lundi 17 février 2003
Statut
Membre
Dernière intervention
22 mars 2007
 1 -
J'ai essayé d'arranger un peu ça.
Merci stepibou pour tes suggestions.

Arnaud
Signaler
arnal69130
Messages postés
445
Date d'inscription
lundi 17 février 2003
Statut
Membre
Dernière intervention
22 mars 2007
 1 -
NB : Je sais pas pourquoi, mais le code source affiché est légèrement différent de celui que j'ai posté :
En javascript, il faut bien écrire Date() et getDate() avec un d majuscule !!!
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)