Css 如何在ngb datepicker-Angular中更改特定日期的单元格背景
我开始与ngb datepicker合作,我想知道是否可以更改某一特定日期的背景色,例如11月8日 HTMLCss 如何在ngb datepicker-Angular中更改特定日期的单元格背景,css,angular,typescript,datepicker,Css,Angular,Typescript,Datepicker,我开始与ngb datepicker合作,我想知道是否可以更改某一特定日期的背景色,例如11月8日 HTML <ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled" #d="ngbDatepicker"></ngb-datepicker> <ng-template #customDay
<ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled"
#d="ngbDatepicker"></ngb-datepicker>
<ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled"
let-focused="focused">
<span class="custom-day" [class.weekend]="isMarkedDay(date)" [class.focused]="focused" [class.bg-primary]="selected"
[class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
{{ date.day }}
</span>
</ng-template>
我已经尝试了一段时间,但我无法使它工作。现在我只是想纪念这一天,但它不起作用。我已经在控制台中检查了
this.calendar.getToday()和this.today()。今天
打印了相同的内容,但当比较它们时是错误的。是的,您可以这样做,您可以在DP中为每天提供自定义HTML模板,您可以根据日期轻松设置css类
- 检查一下,还有
更新
- 您正在比较的日期是JS对象,您不能这样比较它们(您应该了解一些)
- 要比较它们,您可以使用
NgbDate
上的内置方法进行比较,因此您的代码如下所示:
isMarkedDay=()=>this.calendar.getToday().equals(this.today))代码>
抱歉,现在已修复更新的答案和解决方案
export class HistoryComponent implements OnInit {
model: NgbDateStruct;
accomplishedDays: NgbDate[] = [];
day = new Date().getDate();
month = new Date().getMonth() + 1;
year = new Date().getFullYear();
today: NgbDate = new NgbDate(this.year, this.month, this.day); // July, 14 1789
constructor(
public mockdataService: MockDataService,
private calendar: NgbCalendar
) {}
ngOnInit() {}
isDisabled = (date: NgbDate, current: { month: number }) =>
date.month !== current.month;
isMarkedDay = () => this.calendar.getToday() == this.today; // .getWeekday(date) >= this.today;
}