Dans ce tutoriel, je vais vous expliquer comment personnaliser simplement une ou plusieurs dates spécifiques dans un DatePicker. Pour chaque jour, vous pourrez définir si celui-ci est sélectionnable, une classe CSS et/ou une info-bulle.
Cette personnalisation est utile dans plusieurs situations notamment pour :
- un planning de travail où les jours non travaillés ne peuvent pas être sélectionnés
- un calendrier avec une légende permettant de savoir si des rendez-vous ont été pris tel ou tel jour
- etc.
Afin que ce tutoriel soit à la portée de tous, j’ai pris un exemple très simple. Nous allons calculer les jours du week-ends afin de griser dans le DatePicker les Samedis et Dimanches. Ainsi, seuls les jours de la semaine seront sélectionnables par l’utilisateur.
Sélectionner les dates
Pour sélectionner les Samedis et Dimanches, nous allons créer une fonction getWeekends() qui renverra un tableau.
/*
* Get Weekends in a month
* @param {Date} dateBegin
* @return {Array} selectedDates
*/
var getWeekends = function(dateBegin){
var selectedDates = {};
if (dateBegin instanceof Date)
{
var dateEnd = new Date(dateBegin.getFullYear(), dateBegin.getMonth() + 1, 0);
var day = null;
while (dateBegin <= dateEnd)
{
day = dateBegin.getDay();
if (day == 0 || day == 6)
{
selectedDates[dateBegin] = {};
selectedDates[dateBegin][0] = false;
selectedDates[dateBegin][1] = "";
selectedDates[dateBegin][2] = "Weekend";
}
dateBegin.setDate(dateBegin.getDate() + 1);
}
}
return selectedDates;
};
Cette fonction prend en paramètre une date de début et calculera tous les jours du week-end à partir de cette date jusqu’à la fin du mois de celle-ci. Pour avoir le mois entier, la fonction doit donc recevoir en paramètre le 1er du mois.
Attention : Il faut bien faire attention à ce que les dates ne soient pas des DateTime, sinon les comparaisons seront faussées.
Pour chaque date à modifier, il faut renseigner :
- un booléen indiquant si le champ est sélectionnable
- une classe CSS
- un texte pour l’info-bulle
Mettre en place le DatePicker
Afin de personnaliser le DatePicker, nous avons besoin de trois de ses fonctions :
- onChangeMonthYear : appelée lorsque l’on change de mois ou d’année
- beforeShow : appelée lorsqu’on ouvre le DatePicker
- beforeShowDay : appelée pour chaque jour présent dans le DatePicker
Dans les deux premières fonctions, nous allons récupérer les jours du week-end du mois en cours. Celles-ci seront appelées à chaque fois que le mois ou l’année changera.
La dernière fonction se chargera de définir les informations pour chaque jour en fonction des jours récupérés par les deux fonctions précédentes.
var selectedDates = {};
$( "#datepicker" ).datepicker({
onChangeMonthYear: function(year, month)
{
selectedDates = getWeekends(new Date(year, month - 1, 1));
},
beforeShow: function(input, inst){
var dateNow = new Date();
selectedDates = getWeekends(new Date(dateNow.getFullYear(), dateNow.getMonth(), 1));
},
beforeShowDay: function(date)
{
date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var highlight = selectedDates[date];
if (highlight) {
return [highlight[0], highlight[1], highlight[2]];
}
else {
return [true, '', ''];
}
}
});
Retrouvez le code complet sur GitHub.
Tutoriel inspiré de JqueryByExample.