在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

很难帮助您找到任何可行的可复制示例，但是我还是会尝试：P

您可以使用css和data属性更改元素的样式，并且可以向禁用的元素添加任意数据，例如：element.data('disabled', 'true');。

并为每个禁用的元素应用样式：

[data-disabled="true"]{
  background-color: grey;
  opacity: 0.7;
}

此样式将应用于包含data-disabled = true的所有HTML元素。

Answer 2

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

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