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个元素：

以日期作为参数并且必须返回带有以下内容的数组的函数：

[0]：true / false指示该日期是否可选

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

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

因此，您不能在第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()。我还添加了一个更强大的功能来将一个日期与另一个日期进行比较。

希望有帮助。

将课程添加到日期选择器

1 个答案: