Calendrier : assistant de saisie de date dans un formulaire
Soyez le premier à donner votre avis sur cette source.
Vue 61 718 fois - Téléchargée 5 546 fois
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)
Le formulaire est à aranger à votre goût !
N'hésitez pas à poster vos commentaires.
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.
Codes Sources
A voir également
- Formulaire calendrier
- Formulaire date - Meilleures réponses
- Php sprintf date - Meilleures réponses
- Calendrier javascript pour formulaire - Guide
- Positionez un calendrier centrer en dessou d'un formulaire javascript css et div ✓ - Forum - Javascript / DHTML
- Insertion d'un calendrier dans un formulaire d'un site web ✓ - Forum - Javascript / DHTML
- Code source formulaire d'inscription html - Guide
- Calendrier php - Guide
// 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 ;-)
- Messages postés
-
445
- Date d'inscription
- lundi 17 février 2003
- Statut
- Membre
- Dernière intervention
- 22 mars 2007
1comment 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 ! :-))))))
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.");
"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à
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.