css - 如何在 JQueryUI 日期选择器中以不同的颜色设置一周中的特定日期(星期一、星期二等)？

Question

有没有办法在 JQueryUI 日期选择器中以不同的颜色设置一周中的特定日期(所有星期一、全年的所有星期二等)？我知道有选择特定日期的内置方法，也有禁用假期的方法，但到目前为止我还没有找到执行此类任务的通用方法。

Answer 1

jQuery UI 日期选择器不会将类名添加到一周中的特定日期，但您可以使用 css nth-child 选择器。

例如，如果星期日是您日历中一周的第一天，则第三个单元格将是星期二，您可以像这样突出显示它:

.ui-datepicker-calendar tbody tr td:nth-child(5n+3) a {background: #FC0;}

在此示例中，只有第二个表格单元格会受到影响，因为 (5n+3) 公式修改了五个单元格的倍数，偏移了三。完整模式为 3、8、13、18、23、28 等，但由于只有 7 天，因此其他单元格没有更改。

这是一篇方便理解第 n 个子节点如何工作的文章 - http://css-tricks.com/how-nth-child-works/

jQuery 还可以使用 nth-child 公式，这使得这种方法可以跨浏览器。