Ng-Bootstrap Datepicker, how to highlight specific days in Angular4

问题

I have an array of tasks, each contains a date. I would like to highlight the matching days in the datepicker but cannot seem to find in the documentation how to accomplish it. Anyone able to help?

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

Here is my 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()};
  } 
}

And Html:

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

回答1:

For anyone else who gets stuck, I had to define a custom dayTemplate.

Here is the 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>

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

}

来源：https://stackoverflow.com/questions/45522300/ng-bootstrap-datepicker-how-to-highlight-specific-days-in-angular4

标签

angular

datepicker

bootstrap-4

ng-bootstrap