jQuery UI Datepicker

Personnalisation d'une vue fixe (planning)

"Auteur : Hagnoul Daniel"

Texte : v2.0.0 2009-08-07
Texte : v1.0.0 2009-04-06

jQuery User Interface library

La documentation est accompagnée de démonstrations, elle expose les options, les événements et les méthodes des composants (widgets). Tout cela est l’œuvre de nombreuses personnes.

Traduire cette documentation en français pose trois problèmes : celui des droits d’auteurs, celui du personnel nécessaire et celui de l’obsolescence. Il faut se rendre à l’évidence, tout cela restera en anglais.

Themeroller

https://jqueryui.com/themeroller/ est chargé de la redoutable question des "goûts et couleurs". Le volet gauche se compose de trois menus : "Roll Your Down", "Gallery" et "Help".

Voici comment j’obtiens ma version "custom" du jQuery UI 1.7.2 :

• dans le menu "Gallery" je choisi le thème "Humanity" ;
• dans le menu "Roll Your Down" je personnalise :
  • "Font Settings"
    • en enlevant le Verdana qui se trouve devant Arial
    • "Font Size" à 1em.
  • "Clickable : default state"
    • en mettant "Text" à #000000
    • et "Background color & texture" à #c2d2b6.
  • je clique alors sur "Download Theme", ce qui m’amène à
• https://jqueryui.com/download
  • je laisse toutes les options sélectionnées
  • je clique sur "Download"

Datepicker

On utilise généralement le Datepicker en liaison avec un tag "input"
<input id="datepicker" type="text"/>
pour permettre à l’utilisateur de choisir une date et dès la date choisie le "widget" se referme et la date s’inscrit dans le tag "input".

Mais on peut également associer le Datepicker avec un tag "div"
<div id="datepicker"></div>.
On obtient ainsi une vue fixe, le "widget" ne se referme pas après le choix d’une date, ce qui est très pratique pour la gestion d’un emploi du temps.

Première version

Mon premier contact avec les problèmes de personnalisation de la vue fixe d’un Datepicker eut lieu le 6 avril 2009 lors d’une intervention sur le forum jQuery en réponse à cette question.

Pour la personnalisation des dates : soit les auteurs du Datepicker n’y tiennent guère, soit ils n’en ont pas vu l’utilité. La seule option prévue est l’ajout d’une "class" et d’un "title" sur le tag "td" qui contient un tag "a" qui contient la date à colorer. La "class" ajoutée au "td" n’a évidemment aucune influence sur la couleur de la date, on obtient au mieux une bordure colorée.

Il en résultait une première version qui permettait "une certaine personnalisation" mais c’était loin d’être satisfaisant.

Deuxième version

Essentiellement le code de la première version (revu, corrigé et amélioré) plus une petite astuce : se servir de l'ajout d'une "class" sur le tag "td" comme marqueur pour retrouver le tag "a" à colorer.

Code de la version 2.0

Il ne présente aucune difficulté particulière.

Je vous invite à regarder le code du fichier exemple en parallèle avec ce commentaire.

Datepicker : lignes 175 à 209 :

On doit préciser le nombre de mois affiché (numberOfMonths) et de combien de mois (setMonths) déplacera-t-on le calendrier lors d’un clic sur le bouton suivant ou le bouton précédent.

Pour afficher le second semestre 2009, la date minimum (minDate) est le 1er juillet 2009 et la date maximum (maxDate) le 31 décembre 2009.

La fonction beforeShowDay sert à communiquer au Datepicker vos choix en matière d’affichage de dates. Cette fonction gère l’affichage du week-end et pour les autres jours elle dépend de la valeur retournée par la fonction setDays(day,month,year), il s’agit d’un "array" ayant la structure [true ou false, 'nom d’une class existante', 'texte du title'].

Par défaut, setDays renvoie [true,'',''] pour autoriser l’affichage de la date en cours de traitement. Pour un jour de réunion setDays retourne [true,'important','Réunion !'] et pour un jour de vacance [false,'','On est en vacances !'].

La fonction onSelect transmet la date choisie par l’utilisateur à la fonction externe selectedDay(day,month,year).

Fonction setDays() : lignes 13 à 69

Il est important de traiter vos données en respectant un ordre de priorité pour éviter d'attribuer deux événements (donc deux "class") à la même date.

La priorité est : Vacances > Reunion > LundiMercredi > Reserver.

Dans cet exemple le mercredi 12 août est un jour de réunion.

Sans ordre de priorité, le mercredi 12 août serait traité comme jour de réunion et comme mercredi, donc suivant l'ordre dans le code il serait coloré en vert ou en rouge.

Fonction selectedDay() : lignes 71 à 132

L'ordre de priorité a également toute son importance dans le traitement de la date choisie par l'utilisateur.

Sans ordre de priorité, le mercredi 12 août serait traité comme jour de réunion et comme mercredi, les dialogues s'ouvriraient l'un après l'autre.

Sans ordre de priorité, il serait possible de réserver la salle des jeux à une date non souhaitable.

Astuce : lignes 212 à 225

Dans setDays(), pour un jour de réunion on ajoute class='important' sur le tag "td" de la date. L'astuce consiste à s'en servir comme marqueur pour retrouver le tag "a" à colorer en rouge par un
$("td.important > a", this).css("color","#FF0000").

On doit colorer les dates à l'ouverture du Datepicker et chaque fois qu'il se redessine d'où un
$("#datepicker").bind("mouseover", function(){...});
et un $("#datepicker").mouseover(); à l'ouverture de la page et après la fermeture d'un dialogue.

"mouseover" est l'événement qui convient pour Internet Explorer 7 et Internet Explorer 8, alors que Chrome 2 et Firefox 3.5 se contenteraient d'un événement "click".

Bonus

Pour vous remercié d'avoir lu cet article jusqu'au bout voici un exemple de personnalisation d'un Datepicker traditionnel (basé sur un input).

À bientôt !

 

Veuillez poser vos questions
techniques sur les forums DVP,
s'il vous plait.

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.