picture picture
septembre 21, 2017 JavaScript 0 Commentaire

DatePicker : un 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

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 :wink: ) :

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

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 :mrgreen:

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 :

Have fun !

No Responses to “DatePicker : un calendrier d’aide à la saisie de dates”

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: