È ansible eseguire l’interfaccia utente jQuery DatePicker per disabilitare sabato e domenica (e festività)?

Uso un datepicker per scegliere un giorno dell’appuntamento. Ho già impostato l’intervallo di date in modo che sia solo per il mese successivo. Funziona bene Voglio escludere il sabato e la domenica dalle scelte disponibili. Può essere fatto? Se é cosi, come?

Esiste l’opzione beforeShowDay , che accetta una funzione per ogni data, restituendo true se la data è consentita o false se non lo è. Dai documenti:


beforeShowDay

La funzione accetta una data come parametro e deve restituire un array con [0] uguale a vero / falso indicante se questa data sia selezionabile o meno e 1 uguale a un nome di class CSS o “” per la presentazione predefinita. Viene chiamato per ogni giorno nel datepicker prima che venga visualizzato.

Mostra alcune festività nazionali nel datepicker.

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

Esiste una funzione incorporata, chiamata noWeekends, che impedisce la selezione dei giorni del fine settimana.

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

Per combinare i due, potresti fare qualcosa di simile (assumendo la funzione nationalDays dall'alto):

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

Aggiornamento : si noti che a partire dall'interfaccia utente jQuery 1.8.19, l' opzione beforeShowDay accetta anche un terzo paremeter opzionale, un suggerimento popup

Se non vuoi che i fine settimana appaiano, semplicemente:

CSS

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

Queste risposte sono state molto utili. Grazie.

Il mio contributo qui sotto aggiunge un array in cui più giorni possono restituire false (siamo chiusi ogni martedì, mercoledì e giovedì). E ho raggruppato le date specifiche più gli anni e le funzioni senza fine settimana.

Se desideri distriggersre i fine settimana, aggiungi [Sabato], [Domenica] all’array 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]; } }); 

Il DatePicker ha questa funzionalità integrata!

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

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

La soluzione qui che piace a tutti sembra molto intensa … personalmente penso che sia molto più facile fare qualcosa del genere:

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

In questo modo le tue date sono leggibili dall'uomo. Non è poi così diverso che abbia più senso per me in questo modo.

Questa versione di codice ti farà ottenere le date delle festività dal database sql e disabiliterà la data specificata nell’interfaccia utente 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 }); }); }); 

Crea un database in sql e metti le date delle festività nel formato MM / GG / AAAA come Varchar Metti i seguenti contenuti in un file 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] 

Coding felice !!!! 🙂

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

È ansible utilizzare la funzione noWeekends per disabilitare la selezione del fine settimana

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

In questa versione, mese, giorno e anno determina quali giorni bloccare sul calendario.

 $(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, }); }); }); 

per disabilitare i giorni puoi fare qualcosa di simile. dove 1 è lunedì e 3 è mercoledì

Nell’ultima versione di Bootstrap 3 (bootstrap-datepicker.js) beforeShowDay aspetta un risultato in questo formato:

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

In alternativa, se non ti interessa il CSS e il tooltip, semplicemente restituisci un valore booleano false per rendere la data non selezionabile.

Inoltre, non ci sono $.datepicker.noWeekends , quindi è necessario fare qualcosa del genere:

 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, classs: "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, classs: "holiday", tooltip: h }; // It's a regular work day. return { enabled: true }; } $("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });