Question

我需要一个带有范围选择器的内联Jquery UI日历，但有一些日期突出显示为墨水和不可选择。

让您了解此处https://jsfiddle.net/pgns4syL/1/ 这是一个范围选择器，但所有日期都是正常的。如果是16/03/2018，我需要将日期变为红色，并将所有其他日期变为绿色。

在普通的jquery日历中（whiteout范围选择器使用：

beforeShowDay: function (date) {
var ddmmyy = $.datepicker.formatDate('dd/mm/yy', date)
if ($.inArray(ddmmyy, dates) >= 0) return [false, 'gior-occ', " "];
return [true];
}

但是在我的jsfiddle中你可以看到我已经选择了一个beforeShowDay选项。有帮助吗？感谢

Answer 1

从您的问题中不清楚您是否希望dates数组中的日期始终无法选择＆amp;有一个红色边框，或只有在初步选择后。基于描述虽然＆amp;示例代码，我将假设前者。

您可以通过以下方法获得所需的结果：（1）将dates数组向下移动到beforeShowDay初始化函数中，以及（2）将所述函数清理到下面：

function dateRange(date){
   var dates = ['16/03/2018'];
   var ddmmyy = $.datepicker.formatDate('dd/mm/yy', date)
     if ($.inArray(ddmmyy, dates) >= 0) {
    return [false, 'gior-occ', " "];
   }

   var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
   var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
   var isHighlight = date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2));

   return [true, isHighlight ? "dp-highlight" : ""];
}

结合对CSS的小修复（CSS中的gior-occ规则没有前导期.因此它被应用为元素规则，而不是类规则）现在确保gior-occ 类规则适用于dates数组中显示的日期。

分叉＆amp;更新的JSFiddle在这里：https://jsfiddle.net/upmf7f8y/7/

使用范围选择器突出显示Jquery UI日历中的日期

1 个答案: