web-dev-qa-db-fra.com

Est-ce que jpu UI Datepicker peut être activé pour désactiver les samedis et les dimanches (et les jours fériés)?

J'utilise un datepicker pour choisir un jour de rendez-vous. J'ai déjà défini la plage de dates pour être seulement pour le mois prochain. Cela fonctionne bien. Je veux exclure les samedis et les dimanches des choix disponibles. Cela peut-il être fait? Si c'est le cas, comment?

javascriptjqueryjquery-uijquery-ui-datepicker
191
cletus

Il y a l'option beforeShowDay, qui prend une fonction à appeler pour chaque date, renvoyant true si la date est autorisée ou false si ce n'est pas le cas. De la docs:

beforeShowDay

La fonction prend une date en tant que paramètre et doit renvoyer un tableau avec [0] égal à vrai/faux, indiquant si cette date est sélectionnable ou non et 1 égal à un nom de classe CSS ou ' 'pour la présentation par défaut. Il est appelé pour chaque jour du sélecteur de date avant qu'il ne soit affiché.

Affiche quelques jours fériés 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 pouvez faire quelque chose comme (en supposant que la fonction nationalDays 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 l'interface utilisateur jQuery 1.8.19, l'option beforeShowDay accepte également un troisième paramètre facultatif, une info-bulle contextuelle.

241
Adam Bellaire

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

Ma contribution ci-dessous ajoute un tableau où plusieurs jours peuvent renvoyer 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 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];
    }




});
27
orolo

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

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

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

20
Mike Grace

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, cela me semble plus logique.

11
Cleanshooter

Cette version du code vous permettra d’obtenir les dates de vacances de la base de données SQL et de désactiver la date spécifiée dans l’interface utilisateur Datepicker.


$(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 en tant que Varchar Placez 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]

Bonne codage !!!! :-)

6
neo

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

  $(function() {
     $( "#datepicker" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends
     });
     });
5
Malith
$("#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];

}
4
Etienne Dupuis

Dans cette version, mois, jour, et année détermine les jours à bloquer dans 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,
     });
  });
});
2
Christopher Altman

Dans la dernière Bootstrap 3 (bootstrap-datepicker.js)] beforeShowDay attend 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.

De plus, il n'y a pas de $.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 });
0
Caspian Canuck

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

0
Jorgeeadan