如何使用 beforeShowDay 将自定义 CSS 属性添加到日期选择器日期？

Question

我知道如何使用 beforeShowDay 添加 CSS 类到特定日期，但我不知道如何添加个人 CSS 属性。我正在尝试用十六进制值为特定日期着色，但我不知道这些日期会提前到什么时候，所以我不能只为所有这些日期设置类。

Answer 1

考虑以下示例。

$(function() {
  var classSize = {
    "04192021": 12,
    "04202021": 2,
    "04212021": 20,
    "04222021": 6,
    "04232021": 4,
    "04262021": 9
  };
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var dateString = $.datepicker.formatDate("mmddyy", date);
      var result = [
        date.getDay() == 0 || date.getDay() == 6 ? false : true,
        "blue-0",
        "0 Students Attending"
      ];
      if (classSize[dateString]) {
        result[1] = "blue-" + classSize[dateString];
        result[2] = classSize[dateString] + " Students Attending";
      }
      return result;
    }
  });
});

.ui-datepicker td.blue-0 a {
  background-color: #FFFFFF;
}

.ui-datepicker td.blue-1 a {
  background: #EFEFFF;
}

.ui-datepicker td.blue-2 a {
  background: #DFDFFF;
}

.ui-datepicker td.blue-3 a {
  background: #CFCFFF;
}

.ui-datepicker td.blue-4 a {
  background: #BFBFFF;
}

.ui-datepicker td.blue-5 a {
  background: #AFAFFF;
}

.ui-datepicker td.blue-6 a {
  background: #9F9FFF;
}

.ui-datepicker td.blue-7 a {
  background: #8F8FFF;
}

.ui-datepicker td.blue-8 a {
  background: #7F7FFF;
}

.ui-datepicker td.blue-9 a {
  background: #6F6FFF;
}

.ui-datepicker td.blue-10 a {
  background: #5F5FFF;
  color: #fff;
}

.ui-datepicker td.blue-11 a {
  background: #4F4FFF;
  color: #fff;
}

.ui-datepicker td.blue-12 a {
  background: #3F3FFF;
  color: #fff;
}

.ui-datepicker td.blue-13 a {
  background: #2F2FFF;
  color: #fff;
}

.ui-datepicker td.blue-14 a {
  background: #1F1FFF;
  color: #fff;
}

.ui-datepicker td.blue-15 a {
  background: #0F0FFF;
  color: #fff;
}

.ui-datepicker td.blue-16 a {
  background: #0E0EFF;
  color: #fff;
}

.ui-datepicker td.blue-17 a {
  background: #0D0DFF;
  color: #fff;
}

.ui-datepicker td.blue-18 a {
  background: #0B0BFF;
  color: #fff;
}

.ui-datepicker td.blue-19 a {
  background: #0A0AFF;
  color: #fff;
}

.ui-datepicker td.blue-20 a {
  background: #0909FF;
  color: #fff;
}

.ui-datepicker td.blue-21 a {
  background: #0808FF;
  color: #fff;
}

.ui-datepicker td.blue-22 a {
  background: #0707FF;
  color: #fff;
}

.ui-datepicker td.blue-23 a {
  background: #0606FF;
  color: #fff;
}

.ui-datepicker td.blue-24 a {
  background: #0505FF;
  color: #fff;
}

.ui-datepicker td.blue-25 a {
  background: #0404FF;
  color: #fff;
}

.ui-datepicker td.blue-26 a {
  background: #0303FF;
  color: #fff;
}

.ui-datepicker td.blue-27 a {
  background: #0202FF;
  color: #fff;
}

.ui-datepicker td.blue-28 a {
  background: #0101FF;
  color: #fff;
}

.ui-datepicker td.blue-29 a {
  background: #0000FF;
  color: #fff;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>

这是完成您想要完成的事情的一种方法。使用 SASS 您可以制作更多可变的样式。您甚至可以使用 CSS var().

之类的东西

没有简单的方法来访问动态创建的元素。您可以使用 widget() 来执行此操作；但是你必须经常重复运行它。

您可能会考虑分批处理，例如小于 5，获得#EEF。 5 - 10 获得#DDF，11 - 15 获得#CCF 等

$(function() {
  var classSize = {
    "04192021": 12,
    "04202021": 2,
    "04212021": 20,
    "04222021": 6,
    "04232021": 4,
    "04262021": 9,
    "04272021": 29,
    "04282021": 16,
    "04292021": 27,
    "04302021": 7
  };
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var dateString = $.datepicker.formatDate("mmddyy", date);
      var result = [
        date.getDay() == 0 || date.getDay() == 6 ? false : true,
        "blue-0",
        "0 Students Attending"
      ];
      if (classSize[dateString]) {
        switch (true) {
          case classSize[dateString] < 5:
            result[1] = "blue-1";
            break;
          case classSize[dateString] < 10:
            result[1] = "blue-2";
            break;
          case classSize[dateString] < 15:
            result[1] = "blue-3";
            break;
          case classSize[dateString] < 20:
            result[1] = "blue-4";
            break;
          case classSize[dateString] < 25:
            result[1] = "blue-5";
            break;
          case classSize[dateString] < 30:
            result[1] = "blue-6";
            break;
          case classSize[dateString] >= 30:
            result[0] = false;
            result[1] = "blue-7";
            break;
        }
        result[2] = classSize[dateString] + " Students Attending";
      }
      return result;
    }
  });
});

.ui-datepicker td.blue-0 a {
  background-color: #FFFFFF;
}

.ui-datepicker td.blue-1 a {
  background: #CCF;
}

.ui-datepicker td.blue-2 a {
  background: #AAF;
}

.ui-datepicker td.blue-3 a {
  background: #88F;
}

.ui-datepicker td.blue-4 a {
  background: #66F;
}

.ui-datepicker td.blue-5 a {
  background: #44F;
  color: #FFF;
}

.ui-datepicker td.blue-6 a {
  background: #22F;
  color: #FFF;
}

.ui-datepicker td.blue-7 a {
  background: #00F;
  color: #FFF;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>

如何使用 beforeShowDay 将自定义 CSS 属性添加到日期选择器日期？

How to add custom CSS properties to datepicker days with beforeShowDay?

jquery-ui

jquery-ui-datepicker