angular - Ng-Bootstrap Datepicker，如何突出显示 Angular4 中的特定日期

Question

我有一系列任务，每个任务都包含一个日期。我想在日期选择器中突出显示匹配的日期，但似乎无法在文档中找到如何完成它。有谁能帮忙吗？

https://ng-bootstrap.github.io/#/components/datepicker/api

这是我的 typescript :

import { Component, OnInit } from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

const now = new Date();

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor() { 
  }

  ngOnInit() {
  }

  model: NgbDateStruct;
  date: {year: number, month: number};

  selectToday() {
    this.model = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
  } 
}

和 HTML:

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

Answer 1

对于其他遇到困难的人，我必须定义一个自定义的 dayTemplate。

这是 Html:

 <ngb-datepicker #dp 
                [(ngModel)]="model" 
                (navigate)="date = $event.next"
                [dayTemplate]="customDay">
</ngb-datepicker> 

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

还有 typescript :

import { Component, OnInit }  from '@angular/core';
import { NgbDateStruct }      from '@ng-bootstrap/ng-bootstrap';
import { UserService }        from '../../services/user.service';

const now = new Date();

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private userService: UserService) {  
  }

  ngOnInit() {
  }

  model: NgbDateStruct;

  selectToday() {
    this.model = {
      year: now.getFullYear(), 
      month: now.getMonth() + 1, 
      day: now.getDate(),
    };
  } 

  isWeekend(date: NgbDateStruct) {
    const d = new Date(date.year, date.month - 1, date.day);
    return d.getDay() === 0 || d.getDay() === 6;
  }

  isDisabled(date: NgbDateStruct, current: {month: number}) {
    return date.month !== current.month;
  }

  hasTask(date: NgbDateStruct) {
    return this.dateHasTask(date);
  }

  showTasks(date: NgbDateStruct) {
    if (this.dateHasTask(date)){
      // TODO show popup
      alert(date);
    }
  }

  dateHasTask(date: NgbDateStruct): boolean {
    for (var i = 0; i < this.userService.user.tasks.length; i++) {
      var taskDate = new Date(this.userService.user.tasks[i].date);
      var day: number = taskDate.getDate();
      var month: number = taskDate.getMonth() + 1;
      var year: number = taskDate.getFullYear();

      if (day === date.day && month === date.month && year === date.year) {
        return true;  
      }
    }
  }

}