Можно ли настроить DatePicker для пользовательского интерфейса jQuery для отключения суббот и воскресений (и праздничных дней)?

Я использую DatePicker для выбора дня встречи. Я уже установил диапазон дат только на следующий месяц. Это отлично работает. Я хочу исключить субботу и воскресенье из доступных вариантов. Можно ли это сделать? Если да, то как?

Существует beforeShowDayопция, которая принимает функцию, которая будет вызываться для каждой даты, возвращая true, если дата разрешена, или false, если это не так. Из документов:

beforeShowDay

Функция принимает дату в качестве параметра и должна возвращать массив с [0], равным true / false, указывающим, может ли эта дата быть выбрана, и 1 равно названию (ам) класса CSS или '' для представления по умолчанию. Он вызывается для каждого дня в средстве выбора даты до его отображения.

Показать некоторые национальные праздники в 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, ''];
}

Существует одна встроенная функция, которая называется noWeekends, которая предотвращает выбор выходных дней.

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

Чтобы объединить два, вы можете сделать что-то вроде (предполагая nationalDaysфункцию сверху):

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

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

Обновление : обратите внимание, что в jQuery UI 1.8.19 опция beforeShowDay также принимает дополнительный третий параметр, всплывающую подсказку

Если вы не хотите, чтобы выходные выходили вообще, просто:

CSS

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

Эти ответы были очень полезны. Спасибо.

Мой вклад ниже добавляет массив, где несколько дней могут возвращать false (мы закрыты каждый вторник, среду и четверг). И я связал конкретные даты плюс годы и функции без выходных.

Если вы хотите, чтобы выходные были выходными, добавьте [суббота], [воскресенье] в массив 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];
    }




});

DatePicker имеет эту встроенную функциональность!

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

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

Решение, которое всем нравится, кажется очень интенсивным ... лично я думаю, что гораздо проще сделать что-то вроде этого:

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

Таким образом, ваши даты читаются человеком. Это на самом деле не так уж и отличается, просто для меня это имеет больше смысла.

Эта версия кода заставит вас получать даты праздников из базы данных SQL и отключать указанную дату в пользовательском интерфейсе 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
     });
  });
});

Создайте базу данных в sql и укажите даты выходных в формате MM / DD / YYYY как Varchar. Поместите приведенное ниже содержимое в файл 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]

Удачного кодирования !!!! :-)

Вы можете использовать функцию noWeekends, чтобы отключить выбор выходных

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

}

В этой версии месяц, день и год определяет, какие дни блокировать в календаре.

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

для отключения дней вы можете сделать что-то вроде этого. <input type="text" class="form-control datepicker" data-disabled-days="1,3">где 1 - понедельник, а 3 - среда

В последней версии Bootstrap 3 (bootstrap-datepicker.js) beforeShowDayожидается результат в следующем формате:

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

В качестве альтернативы, если вам не нужны CSS и всплывающая подсказка, просто верните логическое значение, falseчтобы сделать дату недоступной для выбора.

Кроме того, нет $.datepicker.noWeekends, поэтому вам нужно сделать что-то вроде этого:

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

Для субботы и воскресенья можно сделать что-то подобное

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