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

Question

Uso un DatePicker per la scelta del 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?

Answer 1

C'è l'opzione beforeShowDay, che accetta una funzione per essere chiamata per ogni data, restituendo true se la data è consentita o false se non lo è. Dalla documentazione:

---

beforeShowDay

La funzione accetta una data come parametro e deve restituire un array con [0] pari a true/false indica se questa data è selezionabile e 1 uguale a un nome di classe CSS o "" per la presentazione predefinita. Viene chiamato per ogni giorno nel datepicker prima che venga visualizzato.

Visualizzare alcune festività nazionali nel datario.

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

Una funzione incorporata esiste, chiamato noWeekends, che impedisce la selezione dei giorni di fine settimana.

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

---

di combinare i due, si potrebbe 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, come di jQuery UI 1.8.19, il beforeShowDay option accetta anche un terzo parametro, un suggerimento popup

Answer 2

Se non si desidera che i fine settimana appaiano, si mply:

CSS

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

Answer 3

In questa versione, il mese, il giorno, e anni determina quali giorni per 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, 
    }); 
    }); 
}); 

Answer 4

Questa versione del codice farà u per ottenere le date delle vacanze dal database SQL e disattivare 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 
    }); 
    }); 
}); 

Creare un database in SQL e mettere Date vacanze in formato/DD/YYYY MM come Varchar Mettere il contenuto di seguito 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] 

felice Coding !!!! :-)

Answer 5

Queste risposte sono state molto utili. Grazie.

Il mio contributo di seguito 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 si desidera disattivare i fine settimana, aggiungere [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]; 
    } 




}); 

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 soluzione qui che piace a tutti sembra molto intenso ... personalmente penso che sia molto più facile da fare qualcosa di simile:

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

questo modo sono leggibile le date. Non è poi così diverso che abbia più senso per me in questo modo.

Answer 8

datapicker ha questa funzionalità integrata!

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

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

Answer 9

È possibile utilizzare noWeekends funzione per disattivare la selezione week-end

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

Answer 10

per disabilitare giorni si può fare qualcosa di simile. <input type="text" class="form-control datepicker" data-disabled-days="1,3"> dove 1 è Lunedi e Mercoledì 3 è

Answer 11

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

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

In alternativa, se non si cura riguardo al CSS e al tooltip, è sufficiente restituire un valore booleano false per rendere la data non selezionabile.

Inoltre, non c'è $.datepicker.noWeekends, quindi è necessario fare qualcosa sulla falsariga di questo:

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