Est-il possible de désactiver la fonction Datepicker de l'interface utilisateur jQuery pour désactiver les samedis et dimanches (et les jours fériés)?

Question

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

Answer 1

Il existe 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. A partir de la documentation:

---

beforeShowDay

La fonction prend une date en tant que paramètre et doit retourner un tableau avec [0] égale à true/false indiquant si cette date ou non sélectionnable et 1 égal à un (des) nom (s) de classe CSS ou "" pour la présentation par défaut. Il est appelé pour chaque jour dans le datepicker avant qu'il ne soit affiché.

Afficher quelques jours fériés dans le calendrier.

$(".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, '']; 
} 

Une fonction intégrée existe, 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 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 que de jQuery UI 1.8.19, le beforeShowDay option accepte également un troisième paramètre facultatif, une info-bulle contextuelle

Answer 2

Si vous ne souhaitez pas que les week-ends apparaissent, mplement:

CSS

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

Answer 3

Dans cette version, mois, jour, et années détermine les jours pour 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, 
    }); 
    }); 
}); 

Answer 4

Cette version du Code fera u pour obtenir les dates de vacances de la base de données SQL et désactiver la date indiqué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éer une base de données SQL et de mettre vos vacances dates format MM/JJ/AAAA 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] 

Bonne programmation !!!! :-)

Answer 5

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 mardis, mercredis et jeudis). Et j'ai regroupé les dates spécifiques plus les années et les fonctions sans week-ends.

Si vous souhaitez que les week-ends soient désactivés, ajoutez [Samedi], [Dimanche] au tableau des jours de fermeture.

$(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 6

$("#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]; 

} 

Answer 7

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 ceci:

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

pour désactiver 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

Answer 11

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

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

Sinon, si vous ne vous souciez pas A propos 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 a pas $.datepicker.noWeekends, donc vous devez faire quelque chose le long des lignes de celle-ci:

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 });