Ng-Bootstrap Datepicker,如何在Angular4中突出显示特定日期 [英] Ng-Bootstrap Datepicker, how to highlight specific days in Angular4
本文介绍了Ng-Bootstrap Datepicker,如何在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
这是我的打字稿:
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>
推荐答案
对于其他遇到困难的人,我必须定义一个自定义的dayTemplate.
For anyone else who gets stuck, I had to define a custom 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;
}
}
}
}
这篇关于Ng-Bootstrap Datepicker,如何在Angular4中突出显示特定日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文