我有一系列任务,每个任务都包含一个日期。我想强调一下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>
答案 0 :(得分:3)
对于遇到困难的其他人,我必须定义一个自定义的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;
}
}
}
}