【问题标题】:PrimeNG p-calendar: change the background-color of the datesPrimeNG p-calendar:更改日期的背景颜色
【发布时间】:2021-02-22 07:49:02
【问题描述】:

您好,我正在尝试自定义 p-calendar,但不知道如何更改正在显示的日期的颜色。请帮忙。提前致谢。

这是我的模板:

<div class="p-field p-col-12 p-md-4">
    <label for="time">Time</label>
    <p-calendar [(ngModel)]="date7" [showTime]="true" [inline]="true" inputId="time"></p-calendar>

</div>

我的 CSS:

  ::ng-deep .ui-datepicker .ui-datepicker-group {
     background-color: whitesmoke;
 }

  
  ::ng-deep .ui-datepicker .ui-widget-content {
     border: 1px solid #888888;
     font-weight: normal;
     color: #000000;
     background-color: red

 }

【问题讨论】:

  • 您使用哪个版本的 PrimeNG?
  • 我使用的是第 10 版。

标签: html css angular primeng primeng-calendar


【解决方案1】:

使用.p-datepicker 而不是.ui-datepicker

CSS

::ng-deep .p-datepicker table td > span {
  background-color: orange;
}

::ng-deep .p-datepicker table td.p-datepicker-today > span {
  background-color: burlywood;
}

demo

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-03-08
    • 1970-01-01
    • 1970-01-01
    • 2021-02-15
    • 2018-03-29
    • 1970-01-01
    • 2015-03-11
    相关资源
    最近更新 更多