禁用特定日期并在 jQuery 日期选择器中启用一周中的特定日期

Question

我正在尝试禁用特定日期，并在jQuery UI日期选择器上仅启用一周中的特定日期。

这是在Wordpress/Woocommerce主题中，我正在尝试解决一些错误，但我在这里花了几个小时试图找出解决方案，甚至尝试了我在StackOverflow和其他网站上找到的每个解决方案，但似乎没有任何效果。

我的目标是仅允许一周中的选定日期可用，但是当选择并购买日期时，我也需要禁用它。我成功地禁用了我需要禁用的星期几，但我甚至无法对应该禁用的购买日期进行硬编码原型。

代码(带有一些硬编码示例(：

$(document).ready(function(){
var available_days = ["3"]; //it comes from the database
var today = new Date();
var tour_start_date = new Date( 1525132800000 ); //it comes from the database
var tour_end_date = new Date( 1546214400000 ); //it comes from the database
var available_first_date = tour_end_date;
var lang = 'en_UK';
lang = lang.replace( '_', '-' );
today.setHours(0, 0, 0, 0);
tour_start_date.setHours(0, 0, 0, 0);
tour_end_date.setHours(0, 0, 0, 0);
if ( today > tour_start_date ) {
tour_start_date = today;
}
function DisableDays(date) {
var day = date.getDay();
if ( available_days.length == 0 ) {
if ( available_first_date >= date && date >= tour_start_date) {
available_first_date = date;
}
return true;
}
if ( $.inArray( day.toString(), available_days ) >= 0 ) {
if ( available_first_date >= date && date >= tour_start_date) {
available_first_date = date;
}
return true;
} else {
return false;
}
}
if ( $('input.date-pick').length ) {
if ( lang.substring( 0, 2 ) != 'fa' ) {
$('input.date-pick').datepicker({
startDate: tour_start_date,
endDate: tour_end_date,
beforeShowDay: DisableDays,
language: lang
});
$('input[name="date"]').datepicker( 'setDate', available_first_date );
} else {
var date_format = $('input.date-pick').data('date-format');
$('input.date-pick').persianDatepicker({
observer: true,
format: date_format.toUpperCase(),
});
}
}
});

Answer 1

请查看： http://api.jqueryui.com/datepicker/#option-beforeShowDay

一个

函数，它将日期作为参数，并且必须返回一个数组，其中包含：

[0]： 真/假，指示此日期是否可选

[1]：要添加到默认演示文稿的日期单元格或""的 CSS 类名

[2]：此日期的可选弹出工具提示

代码中的问题是，您只在需要 Array 时才返回true或false。例如：

$(function() {
var available_days = ["3", "5"]; //it comes from the database
var today = new Date();
var tour_start_date = new Date(1525132800000); //it comes from the database
var tour_end_date = new Date(1546214400000); //it comes from the database
var available_first_date = tour_end_date;
var lang = 'en_UK';
lang = lang.replace('_', '-');
today.setHours(0, 0, 0, 0);
tour_start_date.setHours(0, 0, 0, 0);
tour_end_date.setHours(0, 0, 0, 0);
if (today > tour_start_date) {
tour_start_date = today;
}
function DisableDays(date) {
var day = date.getDay();
var found = false;
if (available_days.length == 0) {
if (available_first_date >= date && date >= tour_start_date) {
available_first_date = date;
}
found = true;
}
if ($.inArray(day.toString(), available_days) >= 0) {
console.log(day + " in Array");
if (available_first_date >= date && date >= tour_start_date) {
available_first_date = date;
}
found = true;
}
console.log(day, found);
return [found, "tour-date", "Tour Date"];
}
if ($('input.date-pick').length) {
if (lang.substring(0, 2) != 'fa') {
$('input.date-pick').datepicker({
startDate: tour_start_date,
endDate: tour_end_date,
beforeShowDay: DisableDays,
language: lang
});
$('input[name="date"]').datepicker('setDate', available_first_date);
} else {
var date_format = $('input.date-pick').data('date-format');
$('input.date-pick').persianDatepicker({
observer: true,
format: date_format.toUpperCase(),
});
}
}
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date: <input type="text" class="date-pick" name="date" />