如何修改PrimeNg p-calendar日期范围选择的选中日期样式？

问题描述 #

需要修改PrimeNg p-calendar组件日期范围选择模式的样式，实现以下效果：

• 日期范围的首尾日期应用p-highlight高亮样式
• 日期范围中间的选中日期使用其他展示颜色
  预期效果参考：
  

此前尝试编写的CSS未达到预期，代码如下：

.p-datepicker table td > span.p-highlight:first-child {
color: var(--datepicker-body-text-color);
background: var(--datepicker-body-selected-color);
}

核心疑问：仅通过CSS是否可以实现上述样式需求？

解决方案 #

完全可以仅通过CSS实现该需求，此前的选择器写法错误。PrimeNg在日期范围选择模式下已经为不同位置的选中日期预置了专属类名，不需要通过:first-child这类结构选择器匹配：

• 范围起始日期元素自带p-range-start类
• 范围结束日期元素自带p-range-end类
• 首尾日期都会同时携带p-highlight类
• 范围中间的选中日期仅携带p-highlight类，没有首尾专属类

可直接使用如下CSS实现目标效果：

/* 配置范围首尾日期的高亮样式，匹配p-highlight效果 */
.p-datepicker table td span.p-highlight.p-range-start,
.p-datepicker table td span.p-highlight.p-range-end {
  color: var(--datepicker-body-text-color);
  background: var(--datepicker-body-selected-color);
  border-radius: 50%; /* 可根据设计需求调整圆角，示例图中首尾为圆形高亮 */
}

/* 配置范围中间日期的样式，和首尾做区分 */
.p-datepicker table td span.p-highlight:not(.p-range-start):not(.p-range-end) {
  background: color-mix(in srgb, var(--datepicker-body-selected-color) 20%, transparent);
  color: var(--datepicker-body-text-color);
  border-radius: 0;
}

如果是在Angular组件的独立样式文件中编写代码，需要添加::ng-deep穿透组件视图封装，否则样式不会生效：

::ng-deep .p-datepicker table td span.p-highlight.p-range-start,
::ng-deep .p-datepicker table td span.p-highlight.p-range-end {
  /* 首尾日期样式属性 */
}
::ng-deep .p-datepicker table td span.p-highlight:not(.p-range-start):not(.p-range-end) {
  /* 中间日期样式属性 */
}

内容的提问来源于stack exchange，提问作者Sergiu