Est-il possible de désactiver les samedis et dimanches (et les jours fériés) dans le Datepicker de jQuery UI ?

Question

J'utilise un sélecteur de date pour choisir un jour de rendez-vous. J'ai déjà défini la plage de dates pour qu'elle ne concerne que le mois suivant. Cela fonctionne bien. Je veux exclure les samedis et les dimanches des choix disponibles. Est-ce possible ? Si oui, comment ?

Answer 1

Il y a le beforeShowDay qui prend une fonction à appeler pour chaque date, renvoyant true si la date est autorisée ou false si elle ne l'est pas. Extrait de la documentation :

---

beforeShowDay

La fonction prend une date comme paramètre et doit retourner un tableau avec [0] égal à true/false indiquant si cette date est sélectionnable ou non et 1 égal à un ou plusieurs noms de classe CSS ou à '' pour la présentation par défaut. Elle est appelée pour chaque jour du sélecteur de date avant qu'il ne soit affiché.

Afficher certains jours fériés nationaux dans le sélecteur de date.

$(".selector").datepicker({ beforeShowDay: nationalDays})   

natDays = [
  [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
  [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
  [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
  [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1
          && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}

Il existe une fonction intégrée, appelée noWeekends, qui empêche la sélection des jours de week-end.

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })

---

Pour combiner les deux, vous pourriez faire quelque chose comme (en supposant que l'option nationalDays de la fonction ci-dessus) :

$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})   

function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return nationalDays(date);
    } else {
        return noWeekend;
    }
}

Mise à jour : Notez qu'à partir de la version 1.8.19 de jQuery UI, la fonction option beforeShowDay accepte également un troisième paramètre facultatif, une info-bulle.

Answer 2

Si vous ne voulez pas du tout que les week-ends apparaissent, il suffit de les faire apparaître :

CSS

th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    display: none;
}

Answer 3

Cette fonctionnalité est intégrée dans le sélecteur de date !

$( "#datepicker" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
});

http://api.jqueryui.com/datepicker/#utility-noWeekends

Answer 4

Ces réponses ont été très utiles. Merci.

Ma contribution ci-dessous ajoute un tableau où plusieurs jours peuvent renvoyer false (nous sommes fermés tous les mardi, mercredi et jeudi). Et j'ai regroupé les dates spécifiques, les années et les fonctions de non-week-end.

Si vous voulez des week-ends libres, ajoutez [samedi], [dimanche] au tableau closedDays.

$(document).ready(function(){

    $("#datepicker").datepicker({
        beforeShowDay: nonWorkingDates,
        numberOfMonths: 1,
        minDate: '05/01/09',
        maxDate: '+2M',
        firstDay: 1
    });

    function nonWorkingDates(date){
        var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
        var closedDates = [[7, 29, 2009], [8, 25, 2010]];
        var closedDays = [[Monday], [Tuesday]];
        for (var i = 0; i < closedDays.length; i++) {
            if (day == closedDays[i][0]) {
                return [false];
            }

        }

        for (i = 0; i < closedDates.length; i++) {
            if (date.getMonth() == closedDates[i][0] - 1 &&
            date.getDate() == closedDates[i][1] &&
            date.getFullYear() == closedDates[i][2]) {
                return [false];
            }
        }

        return [true];
    }

});

Answer 5

La solution que tout le monde aime ici semble très intense... personnellement, je pense qu'il est beaucoup plus facile de faire quelque chose comme ça :

       var holidays = ["12/24/2012", "12/25/2012", "1/1/2013", 
            "5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013", 
            "11/29/2013", "12/24/2013", "12/25/2013"];

       $( "#requestShipDate" ).datepicker({
            beforeShowDay: function(date){
                show = true;
                if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
                for (var i = 0; i < holidays.length; i++) {
                    if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
                }
                var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
                return display;
            }
        });

De cette façon, vos dates sont lisibles par l'homme. Ce n'est pas vraiment différent, c'est juste plus logique pour moi de cette façon.