javascript - 在 datePicker 中禁用单元格并更改它们的颜色

Question

我正在尝试根据使用 API 从数据库中获取的数据禁用某些日期间隔。我设法禁用了从数据库中获取的时间间隔中包含的单元格，但出于某种原因，我找不到更改禁用日期的 bg 颜色的解决方案。

这是我目前的代码:

$.ajax({
  url: ajaxUrl,
  method: 'GET',
  dataType: 'json',
  success: function(response) {
    for (var i in response) {
      console.log(response[i]);
      daysInInterval = (new Date(response[i].end_date).getTime() - new Date(response[i].start_date).getTime()) / (1000 * 60 * 60 * 24);

      for (var ii = 0; ii < daysInInterval; ii++) {
        nextDate = new Date(new Date(response[i].start_date).getTime() + (1000 * 60 * 60 * 24) * (ii + 1));
        if ((nextDate.getMonth() + 1) / 10 < 1) {
          var thisMonth = '0' + (nextDate.getMonth() + 1);
        } else {
          var thisMonth = nextDate.getMonth() + 1;
        }
        datesToBeDisabled.push(('' + nextDate.getFullYear() + '-' + thisMonth + '-' + nextDate.getDate() + '').toString());

      }
      datesToBeDisabled.push(('' + new Date(response[i].start_date).getFullYear() + '-' + thisMonth + '-' + new Date(response[i].start_date).getDate() + '').toString());
      alert(datesToBeDisabled);

    };

  },
  error: function(response) {
    alert('this failed');
  },
})


$("#datepickerStart").datepicker({
  beforeShowDay: function(date) {
    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [datesToBeDisabled.indexOf(string) == -1]
  },
  dateFormat: "yy-mm-dd",
});

我尝试编辑从 jquery.ui.css 使用的类，但没有效果，或者当我把它弄乱了整个表格时

Answer 1

您可以定义自定义禁用日期类。返回禁用数组时必须考虑的事情是必须返回要应用的类。如果您阅读以下文档，它会显示 [0] - true or false 1 - CSS 类。

https://api.jqueryui.com/datepicker/#option-beforeShowDay