Можно ли с помощью jQuery UI Datepicker отключить субботу и воскресенье (и праздничные дни)?
Я использую DatePicker для выбора дня встречи. Я уже установил диапазон дат только на следующий месяц. Это отлично работает. Я хочу исключить субботу и воскресенье из доступных вариантов. Можно ли это сделать? Если так, то как?
14 ответов
Здесь 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;
}
DatePicker имеет эту встроенную функциональность!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
Эти ответы были очень полезны. Спасибо.
Мой вклад ниже добавляет массив, где несколько дней могут возвращать 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];
}
});
Решение, которое всем нравится, кажется очень интенсивным... лично я думаю, что гораздо проще сделать что-то вроде этого:
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;
}
});
Таким образом, ваши даты читаются человеком. Это на самом деле не так уж и отличается, просто для меня это имеет больше смысла.
Вы можете использовать функцию noWeekends, чтобы отключить выбор выходных
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
Эта версия кода заставит вас получать даты праздников из базы данных 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]
Удачного кодирования!!!!:-)
$("#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,
});
});
});
Эта работа для меня:
$( "#datepicker" ).datepicker({
beforeShowDay: function( date ) {
var day = date.getDay();
return [ ( day > 0 && day < 6 ), "" ];
}
});
В последней версии 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 });
Для отключения дней вы можете сделать что-то вроде этого. <input type="text" class="form-control datepicker" data-disabled-days="1,3"> где 1 - понедельник, а 3 - среда
Для субботы и воскресенья можно сделать что-то вроде этого
$('#orderdate').datepicker({
daysOfWeekDisabled: [0,6]
});
Для отключения выходных API имеет встроенную функцию
$('#data_1 .input-group.date').datepicker({
daysOfWeekDisabled: [0,6],
});
0 = воскресенье
6 = воскресенье