javascript - 如何更改 Pikaday 中某些日子的 CSS？

Question

我想在 Pikaday 中更改某天对象的​​颜色，而不进行任何禁用。或通过徽章指定它们。

Answer 1

加载 pikaday 后，通过在样式表中声明来覆盖特定颜色。例如

.is-today .pika-button {
   color: mediumpurple !important; /* default is #33aaff */
}

您可以通过打开 Chrome 的开发工具并删除 is-hidden 来调整样式

<div class="pika-single is-bound left-aligned bottom-aligned is-hidden">

您还可以使用 JavaScript 将一些样式应用于特定的一天，例如 11 日。

document.querySelector('button[data-pika-day="11"]').style.background = 'green';

如果您想使用 JS 方法将样式应用于一周中的特定日期，例如星期一，给定您的日历周统计数据为星期一而不是星期日：

document.querySelectorAll('tr[class="pika-row"]').forEach(tr => { if(!tr.children[0].classList.contains('is-empty')) {
   tr.children[0].firstElementChild.style.background = 'green';
} })