Css 如何在ngb datepicker-Angular中更改特定日期的单元格背景

Css 如何在ngb datepicker-Angular中更改特定日期的单元格背景,css,angular,typescript,datepicker,Css,Angular,Typescript,Datepicker,我开始与ngb datepicker合作,我想知道是否可以更改某一特定日期的背景色,例如11月8日 HTML <ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled" #d="ngbDatepicker"></ngb-datepicker> <ng-template #customDay

我开始与ngb datepicker合作,我想知道是否可以更改某一特定日期的背景色,例如11月8日

HTML

<ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled"
    #d="ngbDatepicker"></ngb-datepicker>


<ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled"
  let-focused="focused">
  <span class="custom-day" [class.weekend]="isMarkedDay(date)" [class.focused]="focused" [class.bg-primary]="selected"
    [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
    {{ date.day }}
  </span>
</ng-template>

我已经尝试了一段时间,但我无法使它工作。现在我只是想纪念这一天,但它不起作用。我已经在控制台中检查了
this.calendar.getToday()和
this.today()。今天
打印了相同的内容,但当比较它们时是错误的。

是的,您可以这样做,您可以在DP中为每天提供自定义HTML模板,您可以根据日期轻松设置css类

  • 检查一下,还有
更新

  • 您正在比较的日期是JS对象,您不能这样比较它们(您应该了解一些)

  • 要比较它们,您可以使用
    NgbDate
    上的内置方法进行比较,因此您的代码如下所示:

    isMarkedDay=()=>this.calendar.getToday().equals(this.today))


抱歉,现在已修复更新的答案和解决方案
export class HistoryComponent implements OnInit {
  model: NgbDateStruct;
  accomplishedDays: NgbDate[] = [];
  day = new Date().getDate();
  month = new Date().getMonth() + 1;
  year = new Date().getFullYear();
  today: NgbDate = new NgbDate(this.year, this.month, this.day); // July, 14 1789

  constructor(
    public mockdataService: MockDataService,
    private calendar: NgbCalendar
  ) {}

  ngOnInit() {}
  isDisabled = (date: NgbDate, current: { month: number }) =>
    date.month !== current.month;

  isMarkedDay = () => this.calendar.getToday() == this.today; // .getWeekday(date) >= this.today;
}