添加 class 到日期日期选择器

Question

我需要将类添加到日期选择器中的日期。

我尝试添加类的数组，但它不起作用。

var dates = ['07/13/2019', '07/18/2019']; //
//tips are optional but good to have
var tips = ['some description', 'some other description'];
var classes = ['class1', 'class2'];

$('#datepicker').datepicker({
 dateFormat: 'dd/mm/yy',
 beforeShowDay: highlightDays,
 showOtherMonths: true,
 numberOfMonths: 1,
});

function highlightDays(date) {
 for (var i = 0; i < dates.length; i++) {
   if (new Date(dates[i]).toString() == date.toString()) {
     return [true, 'highlight', tips[i], classes[i]];
   }
 }
 return [true, ''];
}

https://jsfiddle.net/834cf6rv/3/

Answer 1

您的代码没有错误。 jQuery UI DatePicker 只读取 3 个元素：

A function that takes a date as a parameter and must return an array with:

[0]: true/false indicating whether or not this date is selectable

[1]: a CSS class name to add to the date's cell or "" for the default presentation

[2]: an optional popup tooltip for this date

所以你不能在第 4 个索引中添加类。您可以将它们附加到索引 1 中的类字符串。考虑以下内容：

$(function() {
  var dates = ['07/13/2019', '07/18/2019'];
  var tips = ['some description', 'some other description'];
  var classes = ['class1', 'class2'];

  function compareDates(a, b) {
    if (typeof a === "string") {
      a = new Date(a);
    }
    if (typeof b === "string") {
      b = new Date(b);
    }
    return a.toString() === b.toString();
  }

  function highlightDays(date) {
    var result = [true, '', ''];
    $.each(dates, function(i, d) {
      if (compareDates(d, date)) {
        result = [true, 'highlight ' + classes[i], tips[i]];
      }
    });
    return result;
  }

  $('#datepicker').datepicker({
    dateFormat: 'dd/mm/yy',
    beforeShowDay: highlightDays,
    showOtherMonths: true,
    numberOfMonths: 1,
  });
});

.highlight {
  background-color: yellow;
}

<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>

<div id="datepicker"></div>

一些小改动，其中一个使用 $.each()，我只是更喜欢它而不是 for()。我还添加了一个更强大的函数来比较一个日期和另一个日期。

希望对您有所帮助。

添加 class 到日期日期选择器

Add class to date datepicker

jquery-ui

jquery-ui-datepicker