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

【问题标题】：Highlight dates in jQuery UI calendar with range selector使用范围选择器突出显示 jQuery UI 日历中的日期
【发布时间】：2018-03-11 09:12:08
【问题描述】：

我需要一个带有日期范围选择器和突出显示/禁用日期的内联 jQuery UI 日历。

我的代码示例是here

这是一个范围选择器，但所有日期都是正常的。我需要将当前日期涂成红色，例如，如果它是 16/03/2018，则将所有其他日期涂成绿色。

在一个普通的 jQuery 日历中，范围选择器是白色的：

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

但在我的 jsfiddle 中，您可以看到我已经选择了 beforeShowDay 选项。有什么帮助吗？

【问题讨论】：

标签： jquery css jquery-ui

【解决方案1】：

如果您希望 dates 数组中的日期始终不可选择并带有红色边框，或者仅在进行初始选择后，您的问题并不清楚。根据描述和示例代码，我将假设前者。

您可以通过 (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 规则没有前导句点 . 因此它被用作元素规则，而不是类规则）现在确保 @987654328 @class 规则适用于出现在dates 数组中的日期。

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

【讨论】：