Installer DatePicker, calendrier d’aide à la saisie de dates
DatePicker est l’un des widgets proposées gratuitement par le moteur JavaScript JQuery-UI. Nous en avions parlé dans un article précédent (cf. Autocomplétion du champ de texte avec JQuery-UI) : cet outil est un peu une « usine à gaz » mais les résultats sont néanmoins assez éblouissants…
La fonctionnalité présentée ici est un petit calendrier d’aide à la saisie qui remplit automatiquement la date dans un champ de texte lorsqu’on sélectionne un jour. Finis les jj-mm-AA ou jj/mm/AAAA : le champ sera auto-rempli, et surtout, il est au bon format si vous avez besoin par exemple de la stocker, par exemple, dans une base des données.
Les possibilités de personnalisation de l’aspect de ce calendrier sont énormes… Nous nous en tiendrons donc au template par défaut, qui n’est pas mal de surcroit >>
1ère étape
Installer sur le serveur les fichiers du moteur JQuery-UI (la fonction DatePicker y est incluse, entre autres)
Vous pouvez les télécharger ici.
Il suffit ensuite de les décompresser et d’installer le dossier « jquery-ui » à l’emplacement de votre choix sur la racine de votre site internet. Dans l’exemple qui suit, j’ai installé le dossier « jquery-ui » directement sur la racine du serveur.
2nde étape
Il est maintenant nécessaire de faire un lien entre, d’une part les fichiers Javascripts et CSS de JQuery-UI, et d’autre part votre page web.
Vous pouvez tout insérer entre la balise <head> et </head>.
Personnellement je préfère mettre la partie JavaScript en bas de la page, pour éviter de ralentir le chargement de l’affichage avec ce code lourd (qui n’est pas utilisé immédiatement) :
<!-- entre la balise <head> et </head> -->
<link type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<!-- en bas de la page HTML, juste avant </body> -->
<script type="application/javascript" src="jquery-ui/js/jquery-1.9.1.js"></script>
<script type="application/javascript" src="jquery-ui/js/jquery-ui-1.10.3.custom.js"></script>
<script type="application/javascript" src="jquery-ui/js/jquery.ui.datepicker-fr.js"></script>
NB : n’oubliez pas de personnaliser le chemin du dossier « jquery-ui »
Notez également que si vous aviez déjà installé les 2 premier JavaScript (communs à toutes les applications JQuery-UI), il est inutile de les réinstaller.
3ème étape
Vous allez ensuite créer le formulaire dans lequel vous souhaitez insérer la fonction datapicker. Le champ qui recevra le calendrier d’aide à la saisie est un simple champ texte, aucune classe CSS particulière n’est requise, mais n’oubliez pas de renseigner l’attribut « id= » (gardez le même que le name, c’est plus simple pour la suite). Exemple :
<form action="***.php" method="post">
[...]
<p><input type="text" id="datedebut" name="datedebut" /></p>
[...]
<p><input type="submit" /></p>
</form>
NB : n’oubliez pas de personnaliser le fichier de traitement ***.php de votre formulaire .
4ème étape : installer DatePicker
Il faut maintenant créer la fonction qui va déclencher l’apparition du calendrier en pop-up quand l’utilisateur clique dans le champ de texte concerné.
Pour cela vous allez rajouter SOUS le bloc de code de la seconde étape (en bas de page, si vous avez bien lu 
) :
<script type="application/javascript">
$(document).ready(function() {
$("#datedebut").datepicker({ dateFormat: 'dd/mm/yy',
changeMonth: true
, changeYear: true
, yearRange: '-1:+1'
});
</script>
N’oubliez pas de renseigner l’ID du champ de saisie qui est concerné par le calendrier, c’est le premier paramètre de la fonction (#datedebut dans l’exemple ci-dessus)
C’est la partie la plus délicate : elle est en effet entièrement personnalisable… mais capricieuse, d’expérience.
Pour faire simple :
- changeMonth: true signifie qu’une liste de sélection des mois apparait sur le calendrier
- changeYear: true signifie qu’une liste de sélection des année apparait sur le calendrier
- yearRange: ‘-1:+1’ signifie que les années disponibles pour la sélection vont de A-1 à A+1 (Par ex. : 2016 / 2017 / 2018)
- maxDate: ‘+5Y’ signifie que les années disponibles pour la sélection vont de A > A+5 (Par ex. : 2017 / 2018 / 2019 / 2020 / 2021)
Et c’est tout ! 
Si vous souhaitez plus d’options de personnalisations je vous propose d’aller sur la partie « API Documentation » de la fonction DatePicker : vous serez comblés 
4ème étape (bis)
Dans certains cas il est nécessaire non pas de sélectionner une seule date, mais une date de début ET une date de fin. DatePicker permet cela, en bloquant la possibilité de saisir une date de fin antérieure à la date de début.
Si le champ1 a pour nom (et id) : « date_debut », et que le champ2 a pour nom (et id) : « date_fin », il suffit de remplacer le code JavaScript de la 4eme étape par celui-ci (exemple) :
$(document).ready(function() {
$( "#date_debut" ).datepicker({
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
changeYear: true,
yearRange: '-1:+1',
maxDate: '+1Y',
onClose: function( selectedDate ) {
$( "#date_fin" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#date_fin" ).datepicker({
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
changeYear: true,
maxDate: '+2Y',
onClose: function( selectedDate ) {
$( "#date_debut" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
N’oubliez pas de personnaliser les id des champs (ici #date_debut et #date_fin)
Le nouvel attribut « numberOfMonths » correspond au nombre de mois qui s’affichent à l’écran (2, dans l’exemple ci-dessus)
Le résultat est le suivant :
Installer DatePicker : have fun !
Bonjour Salomé,
avez vous essayé de récupérer juste la date après saisie (affichez la variable récupérée en PHP+exit()) avant qu’elle ne soit ré-envoyée vers le site de location ? A quel format est-elle (jj/mm/AAAA ? ou jj-mm-AAAA ? etc.). Vérifiez ensuite à quel format le site de location requière cette date (cela peut être par exemple un format MySQL : AAAA-mm-jj). Si c’est le cas, retravaillez la date avec un script PHP entre la réception et l’envoi (explode())…
Un grand merci pour votre aide
J’ai une petite question, j’ai intégré le module sur mon site web, lorsque les gens choisissent une date cela les renvoie vers un site de location en ligne.
mais quand ils arrivent sur cette page cela affiche « votre date n’est pas valide ».
Sauriez vous d’ou peu venir le problème ?
merci de votre aide
Bonjour,
Clair, précis et efficace…
Ayant commencé le développement Web il y a moins de 3 semaines, parfait !
Merci
Super tuto ! merci
je me suis permis de modifier le script Java de l’étape 4 car il ne fonctionnait pas.
Le reste est bon!
$(function() {
$(« #datedebut »).datepicker({ dateFormat: « dd/mm/yy », changeMonth: true, changeYear: true, yearRange: ‘-1:+1’ }).val()});