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

Question

我有一個任務數組，每個任務都包含一個日期。我想強調datepicker中的匹配日期，但似乎無法在文檔中找到如何完成它。任何人都可以幫忙？

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

這裏是我的打字稿：

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> 

而且打字稿：

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; 
     } 
    } 
    } 

}