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

Catégorie :Date / Heure Classé sous : calendrier, date, formulaire Niveau : Initié Date de création : 14/03/2005 Date de mise à jour : 26/07/2005 18:10:25 Vu / téléchargé: 31 083 / 3 365

Note :
8 / 10 - par 7 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (62)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
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.
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

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

Commentaires et avis

signaler à un administrateur
Commentaire de stepibou le 14/03/2005 20:57:47

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 :
<A HREF=# onClick="window.opener.location.href='page.html';return(true)">lien</A>

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

a metter dans le <a> 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 à un administrateur
Commentaire de arnal69130 le 15/03/2005 09:57:55

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 : <a href="#" ...>...</a>...

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 à un administrateur
Commentaire de stepibou le 15/03/2005 14:57:38

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 : ------
<A HREF="#" id="upload" onClick="Openpop()">inscrivez vous!</A>
<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>
<body>
<a href="javascript: window.opener.parent.document.location.href='pageprincipale.php';
window.close();
">retour</a>
<form ...>
<input type="submit" name="" value="ok" onClick="lien()" />
</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 à un administrateur
Commentaire de arnal69130 le 15/03/2005 18:11:22

J'ai essayé d'arranger un peu ça.
Merci stepibou pour tes suggestions.

Arnaud

signaler à un administrateur
Commentaire de arnal69130 le 16/03/2005 11:34:20

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 !!!

signaler à un administrateur
Commentaire de cedricM le 29/03/2005 09:45:33

SUPER!!!!! je cherchais à faire cette source depuis longtemps!!!! Merci à vous deux!
On peut même penser à mettre une variable dans l'appel de la fonction lien()
du style:

function lien(test) {
window.opener.parent.document.location.href='pageprincipale.php?test='+test; }

<input type="submit" name="" value="ok1" onClick="lien(1)" />
<input type="submit" name="" value="ok2" onClick="lien(2)" />
Ce qui laisse pas mal de possibilités ensuite sur la saisie de liste déroulante etc...

j'ai une question en plus pour vous, je sais que c'est plus du javascript que du php mais elle colle parfaitement aux commentaires précédents.
peut on mettre à jour des infos dans une iframe (ou autres mais c'est la seule solution que je vois) de la page principale toujours à partir du popup, sans recharger toute la page principale (pour éviter de tout resaisir?
en utilsant target... ou un truc du stule peut etre...

Merci
zevak

signaler à un administrateur
Commentaire de arnal69130 le 29/03/2005 09:59:28

Content que ça t'aide à avancer !

Pour répondre à ta question, je pense qu'il est tout à fait possible de modifier un champ dans une iframe de la page appelante à partir d'une popup.
En revanche, j'utiliserais plutôt une syntaxe du type window.opener.getElementById('NomIframe').élémentAmodifier que l'attribut target. A voir...

Arn;o)

signaler à un administrateur
Commentaire de cedricM le 29/03/2005 10:25:45

Merci de ta réactivité!
pour l'IFRAME c'est ok, j'ai réussi mais tu as raison ce n'est surement pas la meilleure solution...

du coup j'ai essayé ce que tu m'as dit mais en changeant le nom de l'iframe par le nom d'un formulaire, ca doit marcher aussi non?
J'ai regardé des ex sur selfHTML et voila le code que j'ai fait et qui ne marche pas....

dans le popup
<script type='text/javascript'>
function lien(test) {
window.opener.parent.document.getElementById('cp').champCP = test;
}
</script>

dans la page princpale:
<form name="cp" action="valider.php" method="POST">
<input type="text" name="champCP" value="">
</form>

Je dois forcement utiliser les zones (id=...) ?
si tu pôuvais me lacer sur la bonne piste..
merci d'avance :)

signaler à un administrateur
Commentaire de arnal69130 le 29/03/2005 12:08:36

Là, tu rejoins le code initiale de cette source, sauf que tu as un champ texte au lieu de combos ;o)

L'utilisation de getElementById('...') est, à mon avis, la plus efficace, la plus propre, et la plus portable (ou standard, comme tu veux).

Mais forcément, elle implique de mettre un attribut id="..." dans la balise du champ auquel tu veux accéder.
Dans ton exemple,  il n'y a pas d'élément dont l'id est "cp", donc ça ne risque pas de marcher ;o)

Essaie ça :

<script type="text/javascript">
function lien(test) {
window.opener.document.getElementById('champCP').value='test';
}
</script>

et

<form name="cp" action="valider.php" method="POST">
<input type="text" name="champCP" id="champCP" value="" />
</form>

Voila, j'espère que ça t'aidera. Si ça ne marche tjs pas comme tu veux, décris un peu plus précisemment ton problème. Juste dire «ça ne marche pas» n'est pas très explicite ;o)

Arno

signaler à un administrateur
Commentaire de cedricM le 29/03/2005 13:57:47

Merci beaucoup pour ton aide et de ta réactivité ! Cela va me permettre d'avancer dans mon projet.

signaler à un administrateur
Commentaire de yakob59 le 02/05/2005 15:51:07

Salut arnal !
Il est très bien ton script, il marche a fond, mais ya un ptit truc que j'arrive pas à faire avec :
ton code est fait pour etre encapsulé dans un formulaire. Tout est ok pour cela, les données sont bien intégrées dans ma base de données.
Mais j'ai également créé un autre formulaire pour faire des modifications, et la, je n'arrive pas à récupérer la date entrée dans la base de données, il me met toujours par défaut la date du jour.
Pourrais-tu m'aider, car pour moi le php ca va encore mais le javascript !!!! :-/

Merci d'avance

signaler à un administrateur
Commentaire de arnal69130 le 12/05/2005 10:54:42

salut yakob,
mieux vaut tard que jamais...
Il faut que tu regarde la fonction javascript Date() :
http://fr.selfhtml.org/javascript/objets/date.htm
Dans la fonction dateDansListe (index.php), dans mon script il n'y a pas de paramètre, donc on prend la date du jour.
Mais si tu mets une autre date en paramètre, c'est cette date qui sera sélectionnée.

En espérant t'avoir aidé,
Arn;o)

signaler à un administrateur
Commentaire de yakob59 le 20/05/2005 12:00:18

C'est bon j'ai reussi grâce à tes conseils arnal. A toute fin utile, je joint la nouvelle fonction dateDansListe()

function dateDansListe()
      {  
      <?php if (isset($_POST["listJour"]) && !empty($_POST["listJour"]) && isset($_POST["listMois"]) && !empty($_POST["listMois"])) {
          $mois=substr($_POST["listMois"],0,2)-1;
          echo "d=new Date(" . substr($_POST["listMois"],2,4) . "," . $mois . "," . $_POST["listJour"] . ");\n";
        } else{
          echo "d=new Date();\n"; }
  ?>
          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();
          alert(j.toString());  
          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();
      }

signaler à un administrateur
Commentaire de yakob59 le 20/05/2005 12:07:44

euh vous pouvez virer le   alert(j.toString());  c'etait juste pour le debogage, pour moi mieux comprendre le truc.
En tout cas je le redis, MERCI ARNAL !

signaler à un administrateur
Commentaire de matsuda le 08/07/2005 13:53:50

merci pour cette code!!
Je me demande seulement comment récupérer la date est les stoker dans 3 variable $jour $mois $annee dan une base de donnée apré validation du date?
merci..

signaler à un administrateur
Commentaire de arnal69130 le 11/07/2005 10:27:09

Bonjour Matsuda,
Peux-tu préciser un peu ta question... Ton problème vient-il de l'envoi du formulaire en POST, de la requête d'insertion dans ta BD, ou de la récupération de $mois et $année distinctement à partir du champ $moisAnnée ?
Arn;o)

signaler à un administrateur
Commentaire de arnal69130 le 26/07/2005 17:43:50

Pour que tout le monde en profite, voila un message de inabil :

--- inabil :
bonjour,

voila, j'ai esseyé d'executer le code mais ça marche pas.
Est ce qu'il y a une MAJ ou le probléme viens de chez moi.
merci d'avance

--- arnal69130 :
bonjour,
chez moi ça marche !
quel est ton problème ?

--- inabil :
voila, il y a les deux liste qui s'affiche ,mais le calendrier pas

--- arnal69130 :
suite ici http://www.phpcs.com/code.aspx?ID=30101#commentaires

signaler à un administrateur
Commentaire de arnal69130 le 26/07/2005 17:45:37

->inabil, as-tu cliqué sur "calendrier" ?
as-tu un message d'erreur ?
as-tu un avertissement de pop-up bloquée ?

signaler à un administrateur
Commentaire de inabil le 26/07/2005 17:49:04

non pas du tout, simplement a la place du calendrier il y a une croix rouge  ecrit a coté calendrier

signaler à un administrateur
Commentaire de arnal69130 le 26/07/2005 17:55:32

cette croix rouge, c'est parce que l'image du "bouton" n'a pas été trouvée :
<img id="imgCalend" src="BCalend.gif" alt="Calendrier" />
Il faut que tu places une image BCalend.gif dans ton répertoire.
C'est ton seul problème ?

signaler à un administrateur
Commentaire de inabil le 26/07/2005 18:02:10

qd je telecharge le script, elle n'y est pas dedans?
envoie la moi si c possible par mail :
nazaca@caramail.com
merci

signaler à un administrateur
Commentaire de arnal69130 le 26/07/2005 18:11:36

j'ai ajouté l'image au zip, mais tu peux bien prendre celle que tu veux !
Arn;o)

signaler à un administrateur
Commentaire de yooooohito le 11/10/2005 10:52:06

Salut et merci pour ton code.

Je voudrais le modifier (newbie inside) pour pouvoir sélectionner le mois précédent la date du jour : Est-ce possible? et pourrais-tu me mettre sur la piste stp.

Ex : on est le 11 octobre 2005, je voudrais pouvoir sélectionner une date de septembre 2005

Merci d'avance

signaler à un administrateur
Commentaire de yooooohito le 11/10/2005 11:00:12

Oups, c'était tt simple et j'ai trouvé :

//mois et année actuels
$anR=date("Y");
$mm=date("m")-1;

Merci encore pour ton boulot

signaler à un administrateur
Commentaire de ohmusan le 15/01/2006 13:37:22

Salut et merci pour ton code ! Depuis le temps que j'en cherchais un simple d'utilisation et propre !
Par contre, j'ai un piti pb : comme Yooooohito je voudrais pouvoir choisir des mois précédant le mois actuel mais en remontant au moins à 6 mois (voir un an)
Si je fais comme lui et que je mets "$mm=date("m")-12;", je me retrouve face à 12 fois "janvier 2006" mais pas trace de 2005...
J'ai bidouillé un peu mais sans obtenir de résultat satisfaisant... :(
HELP grand maître !

Merci encore

signaler à un administrateur
Commentaire de gilels le 02/02/2006 23:49:12

Salut et bravo pour ce petit calendrier bien pratique, il y a t'il un moyen de rendre non selectionnable certains jours , je pense aux dimanches par exemple.

Merci

signaler à un administrateur
Commentaire de arnal69130 le 03/02/2006 09:26:41