Le jQuery UI Datepicker peut-il être fait pour désactiver les samedis et dimanches (et jours fériés)?

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 le mois prochain uniquement. Ça marche bien. Je souhaite exclure les samedis et dimanches des choix disponibles. Cela peut-il être fait? Si c'est le cas, comment?

Il y a l' beforeShowDayoption, qui prend une fonction à appeler pour chaque date, retournant true si la date est autorisée ou false dans le cas contraire. De la documentation:

beforeShowDay

La fonction prend une date comme paramètre et doit renvoyer un tableau avec [0] égal à vrai / faux indiquant si cette date est sélectionnable et 1 égal à un ou plusieurs noms de classe CSS ou '' pour la présentation par défaut. Il est appelé pour chaque jour dans le sélecteur de date avant qu'il ne s'affiche.

Affichez certaines fêtes nationales dans le sélecteur de dates.

$(".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 pouvez faire quelque chose comme (en supposant la nationalDaysfonction 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 que depuis jQuery UI 1.8.19, l' option beforeShowDay accepte également un troisième paramètre optionnel, une info-bulle contextuelle

Si vous ne voulez pas du tout que les week-ends apparaissent, simplement:

CSS

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

Ces réponses ont été très utiles. Je vous remercie.

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

Si vous voulez des week-ends, 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];
    }




});

Le datepicker a cette fonctionnalité intégrée!

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

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

La solution ici que tout le monde aime 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 si différent que ça a plus de sens pour moi de cette façon.

Cette version du code vous permettra d'obtenir les dates de vacances à partir de la base de données SQL et de désactiver la date spécifiée dans le sélecteur de dates de l'interface utilisateur

$(document).ready(function (){
  var holiDays = (function () {
    var val = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'getdate.php',
        'success': function (data) {
            val = data;
        }
    });
    return val;
    })();
  var natDays = holiDays.split('');

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (var i = 0; i ‘ natDays.length-1; i++) {
    var myDate = new Date(natDays[i]);
      if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
      {
        return [false];
      }
    }
    return [true];
  }

  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
  $(function() { 
    $("#shipdate").datepicker({
      minDate: 0,
      dateFormat: 'DD, d MM, yy',
      beforeShowDay: noWeekendsOrHolidays,
      showOn: 'button',
      buttonImage: 'images/calendar.gif', 
      buttonImageOnly: true
     });
  });
});

Créez une base de données en sql et mettez vos dates de vacances au format MM / JJ / AAAA comme Varchar Mettez le contenu ci-dessous dans un fichier getdate.php

[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]

Happy Coding !!!! :-)

Vous pouvez utiliser la fonction noWeekends pour désactiver la sélection du week-end

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

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

...

var dates = [new Date("1/1/2011"), new Date("1/2/2011")];

function highlightDays(date) {

    for (var i = 0; i < dates.length; i++) {
        if (date - dates[i] == 0) {
            return [true,'', 'TOOLTIP'];
        }
    }
    return [false];

}

Dans cette version, le mois, le jour et l' année déterminent les jours à bloquer sur le calendrier.

$(document).ready(function (){
  var d         = new Date();
  var natDays   = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (i = 0; i < natDays.length; i++) {
      if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
      {
        return [false];
      }
    }
    return [true];
  }
  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
  $(function() { 
    $(".datepicker").datepicker({

      minDate: new Date(d.getFullYear(), 1 - 1, 1),
      maxDate: new Date(d.getFullYear()+1, 11, 31),

      hideIfNoPrevNext: true,
      beforeShowDay: noWeekendsOrHolidays,
     });
  });
});

pour désactiver les jours, vous pouvez faire quelque chose comme ça. <input type="text" class="form-control datepicker" data-disabled-days="1,3">où 1 est lundi et 3 est mercredi

Dans la dernière version de Bootstrap 3 (bootstrap-datepicker.js) beforeShowDayattend un résultat dans ce format:

{ enabled: false, classes: "class-name", tooltip: "Holiday!" }

Alternativement, si vous ne vous souciez pas du CSS et de l'info-bulle, renvoyez simplement un booléen false pour rendre la date non sélectionnable.

En outre, il n'y en a pas $.datepicker.noWeekends, vous devez donc faire quelque chose dans le sens de ceci:

var HOLIDAYS = {  // Ontario, Canada holidays
    2017: {
        1: { 1: "New Year's Day"},
        2: { 20: "Family Day" },
        4: { 17: "Easter Monday" },
        5: { 22: "Victoria Day" },
        7: { 1: "Canada Day" },
        8: { 7: "Civic Holiday" },
        9: { 4: "Labour Day" },
        10: { 9: "Thanksgiving" },
        12: { 25: "Christmas", 26: "Boxing Day"}
    }
};

function filterNonWorkingDays(date) {
    // Is it a weekend?
    if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
        return { enabled: false, classes: "weekend" };
    // Is it a holiday?
    var h = HOLIDAYS;
    $.each(
        [ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ], 
        function (i, x) {
            h = h[x];
            if (typeof h === "undefined")
                return false;
        }
    );
    if (h)
        return { enabled: false, classes: "holiday", tooltip: h };
    // It's a regular work day.
    return { enabled: true };
}

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

Pour samedi et dimanche, vous pouvez faire quelque chose comme ça

             $('#orderdate').datepicker({
                               daysOfWeekDisabled: [0,6]
                 });