Calendrier de saisie php et javascript

5/5 (47 avis)

Vue 94 232 fois - Téléchargée 12 978 fois

Description

C'est un calendrier que j'ai tiré de phpMyAdmin et que j'utilise dans mes formulaires.
Pour l'utiliser, vous devez :

- nommer votre formulaire, ex : <form name="form_test">
- "nommer" et "IDer" vos champs texte, ex : <input type="text" id="id_ddn" name="ddn" />
- utiliser la fonction implémentée "create_calendar" pour créer les 3 bouttons permettants de remplir le champs texte.
Regardez l'exemple dans index.php pour mieux comprendre.

Ces fonctions sont très facilement réutilisables avec les images et les fonctions JavaScript et PHP que je vous ai donné en source.

2 fichier pour tester : test.html et test.php4

Source / Exemple :


<?php
require("req_buttons.php4");
/**

  • calendar.php4
*
  • @version 2.0
  • @copyright 2006
  • /
$t_calendar_months_full=array(1=>"Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"); $t_calendar_days_abreviate=array(1=>"Lu","Ma","Me","Je","Ve","Sa","Di"); $mois_chiffre=array(1=>"01","02","03","04","05","06","07","08","09","10","11","12"); $mois_full=$t_calendar_months_full; //$mois_abrege=array(1=>"Jan","Fév","Mar","Avr","Mai","Jun","Jul","Aoû","Sep","Oct","Nov","Déc"); //$semaine_full=array(1=>"Lundi","Mardi","Mercredi","Jeudi","Venredi","Samedi","Dimanche"); $semaine_abrege=$t_calendar_days_abreviate; // Variables // mois if (isset($_POST["mois"])) {$mois_selectionne=$_POST["mois"];} else{$mois_selectionne=date("n");} // années if (isset($_POST["annee"])) {$annee_selectionne=$_POST["annee"];} else{$annee_selectionne=date("Y");} ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="fr" /> <meta name="Distribution" content="Private" /> <meta name="Robots" content="None" /> <meta name="Rating" content="General" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <title>Calendrier</title> <script language="JavaScript" type="text/javascript" src="js/dates.js"></script> <body> <table class="calendar"> <tr> <th width="50%"> <table border="0" align="center"> <tr> <?php if ($mois_selectionne==1) { ?> <td style="background-color: transparent;text-align: right"><form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"><input type="hidden" name="mois" value="12" /><input type="hidden" name="annee" value="<?php echo $annee_selectionne-1;?>" /><button type="submit" name="bt_month_less" title="-" class="im">«</button></form></td> <?php }else{ ?> <td style="background-color: transparent;text-align: right"><form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"><input type="hidden" name="mois" value="<?php echo ($mois_selectionne=="1") ? $mois_selectionne : $mois_selectionne-1;?>" /><input type="hidden" name="annee" value="<?php echo $annee_selectionne;?>" /><button type="submit" name="bt_month_less" title="-" class="im">«</button></form></td> <?php } ?> <td style="background-color: transparent;"> <form name="form_mois" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"><input type="hidden" name="annee" value="<?php echo $annee_selectionne;?>" /> <select name="mois" onchange="form_mois.submit()"> <?php $i=0; foreach ($mois_full as $value){ $i++; ?> <option value="<?php echo $i;?>"<?php echo ($mois_selectionne==$i) ? (" selected=\"selected\""):("");?>><?php echo $value;?></option> <?php } ?> </select> </form> </td> <?php if ($mois_selectionne==12) {/* permettre d'augmenter d'une année vers année n+1 et mois==1 */ ?> <td style="background-color: transparent;text-align: left"><form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"><input type="hidden" name="mois" value="1" /><input type="hidden" name="annee" value="<?php echo $annee_selectionne+1;?>" /><button type="submit" name="bt_month_plus" title="+" class="im">»</button></form></td> <?php }else{ ?> <td style="background-color: transparent;text-align: left"><form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"><input type="hidden" name="mois" value="<?php echo ($mois_selectionne==12) ? $mois_selectionne : $mois_selectionne+1;?>" /><input type="hidden" name="annee" value="<?php echo $annee_selectionne;?>" /><button type="submit" name="bt_month_plus" title="+" class="im">»</button></form></td> <?php } ?> </tr> </table> </th> <th width="50%"> <table border="0" align="center"> <tr> <td style="background-color: transparent;text-align: right"><form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"><input type="hidden" name="mois" value="<?php echo $mois_selectionne;?>" /><input type="hidden" name="annee" value="<?php echo ($annee_selectionne>1920) ? $annee_selectionne-1 : $annee_selectionne;?>" /><button type="submit" name="bt_year_less" title="-" class="im">«</button></form></td> <td style="background-color: transparent;"> <form name="form_annee" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> <input type="hidden" name="mois" value="<?php echo $mois_selectionne;?>" /> <select name="annee" onchange="form_annee.submit()"> <?php $annee_depart = 1920; $annee_max = date("Y")+1; $j=0; for($j=$annee_max;$j>=$annee_depart;$j--){ ?> <option value="<?php echo $j;?>"<?php echo ($annee_selectionne==$j) ? (" selected=\"selected\""):("");?>><?php echo $j;?></option> <?php } ?> </select> </form> </td> <td style="background-color: transparent;text-align: left"><form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"><input type="hidden" name="mois" value="<?php echo $mois_selectionne;?>" /><input type="hidden" name="annee" value="<?php echo ($annee_selectionne<(date("Y")+1)) ? $annee_selectionne+1 : $annee_selectionne;?>" /><button type="submit" name="bt_year_plus" title="+" class="im">»</button></form></td> </tr> </table> </th> </tr> </table> <table class="calendar" align="center"> <tr> <?php $nombre_jours_mois = cal_days_in_month(CAL_GREGORIAN,$mois_selectionne,$annee_selectionne); $premier_jour_mois = jddayofweek(cal_to_jd(CAL_GREGORIAN,$mois_selectionne,1,$annee_selectionne),0); //echo $premier_jour_mois; $premier_jour_mois = ($premier_jour_mois==0)? 7 : ($premier_jour_mois); foreach ($semaine_abrege as $value){ ?> <th><?php echo $value; ?></th> <?php } ?> </tr> <?php $num_col=0; $bg=0; for($k=-$premier_jour_mois+2;$k<=$nombre_jours_mois;$k++){ if ($num_col==0) { $tdbg=(($bg%2)==0)?"two":"one";?> <tr> <?php } if ($mois_selectionne<10) {$mois_aff=$mois_chiffre[$mois_selectionne];} else{$mois_aff=$mois_selectionne;} if ($k<10) {$jour_aff="0".$k;} else{$jour_aff=$k;} if (($k>=$premier_jour_mois) AND ($k<=$nombre_jours_mois)) { echo ($k==date("j"))?("\t\t<td class=\"selected\"><a href=\"javascript:returnDate('$jour_aff/$mois_aff/$annee_selectionne')\">$jour_aff</a></td>\n"):("\t\t<td class=\"$tdbg\"><a href=\"javascript:returnDate('$jour_aff/$mois_aff/$annee_selectionne')\">$jour_aff</a></td>\n"); } else{ if ($k<$premier_jour_mois AND $k>0) { echo "\t\t<td class=\"$tdbg\"><a href=\"javascript:returnDate('$jour_aff/$mois_aff/$annee_selectionne')\">$jour_aff</a></td>\n"; } else{ echo "\t\t<td class=\"$tdbg\">&nbsp;</td>\n"; } } if ($num_col==6) {echo "\t</tr>\n\t\t";} $num_col=($num_col+1)%7; $bg++; } ?> <tr> <td colspan="7"><?php buttons("close");?></td> </tr> </table> <br /> </body> </html>

Conclusion :


Fonctionne avec IE et FireFox
Inspiré de phpMyAdmin

Permet d'inscrire une date depuis un calendrier au format :
JJ-MM-AAA
ou si vous préférez
DD-MM-YYYY

Utilise JavaScript et CSS pour la mise en forme.
D'autres fonctions sont disponibles dans "req_calendrier" pour pouvoir avec la date de la fin du mois par exemple.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
l69 Messages postés 2 Date d'inscription dimanche 20 juin 2010 Statut Membre Dernière intervention 6 octobre 2012
8 mai 2012 à 15:27
Bonjours, je l'ai adapté un peut car il y marchait pas au début, j'ai juste un problème:
je dois avoir la date comme ça: 2012-05-15 et je l'obtiens comme ça: 08/05/2012

Comment faire ?
djroulo Messages postés 25 Date d'inscription dimanche 22 février 2004 Statut Membre Dernière intervention 21 octobre 2008
27 oct. 2010 à 17:31
Non, c'est un problème d'évènement.
Dans votre source, si vous l'affichez, elle devrait être de la forme :

Or, nous ne voulons pas ouvrir le calendrier sur l'évènement onclick ou autre, il faut donc laisser l'évènement onClick sur le bouton (image de calendrier) prévu à cet effet.

Il se pourrait aussi que le nom du bouton soit le même que celui de votre calendrier... à vous de faire la vérification !

Bon courage.
cs_saille Messages postés 8 Date d'inscription vendredi 27 novembre 2009 Statut Membre Dernière intervention 15 février 2013
27 oct. 2010 à 15:58
Bonjour DJROULO,

Je voulais tester ce calendrier, qui semble correspondre exactement à ce que je cherche. J'ai téléchargé les .zip, créé les dossiers images/css et js et j'ai basculé les obets adéquat dedans.
Mais quand je teste le formulaire test.php4 le calendrier s'affiche au moment où je positionne le curseur dans la date, après choix ma date est bien alimentée, mais le calendrier s'ouvre à nouveau et systématiquement.

Je n'ai absolument rien modifié dans les pages téléchargées. Ce ne devrait donc pas être un problème de noms de champs ?

Merci de votre aide
saille
gildelau Messages postés 5 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 9 septembre 2010
9 sept. 2010 à 18:47
Bonjour DJROULO

Merci pour votre promptitude à répondre. Comme je vous le disais je débute et en fait je me suis aperçu que je n'executais pas mon code sous www, donc ça ne pouvait pas marcher. Maintenant c'est OK et ça marche super bien. Je vous remercie encore pour ce code. Bravo et surtout merci pour votre disponibilité.

Gildelau
djroulo Messages postés 25 Date d'inscription dimanche 22 février 2004 Statut Membre Dernière intervention 21 octobre 2008
9 sept. 2010 à 17:48
Vous affichez directement le code alors que la page devrait être interprétée par l'application PHP.

Vous devez faire en sorte que votre Apache utilise les extension PHP et PHP4.

Allez voir cela dans httpd.conf / Section "Application".

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.