Добавить класс к дате datepicker - PullRequest
Новая
       19

Добавить класс к дате datepicker

0 голосов
/ 03 июля 2019

Мне нужно добавить классы к датам в указателе даты.

Я пытался добавить массив классов, но он не работает. 

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/

1 Ответ

0 голосов
/ 03 июля 2019

Нет ничего неправильно с вашим кодом.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().Я также добавил более надежную функцию для сравнения даты с другой датой.

Надеюсь, это поможет.

...