如何在日期选择器日历中突出显示当前日期？

Question

我正在使用 ng-bootstrap datepicker 要在我的应用内联日历中显示日历，日历不会像这样显示当前日期。

我什么都试过了，没有人能帮忙解决这个问题吗？

Answer 1

您可以试试这个解决方案：
Working Example

import {Component,OnInit} from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

const now = new Date();

@Component({
  selector: 'ngbd-datepicker-basic',
  templateUrl: './datepicker-basic.html'
})
export class NgbdDatepickerBasic implements OnInit  {

  model: NgbDateStruct;
  date: {year: number, month: number};

  ngOnInit(){
     this.selectToday()
   }

  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 2

您可以尝试使用此解决方案。

model = {
    year: now.getFullYear(), 
    month: now.getMonth() + 1, 
    day: now.getDate()
}

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

Answer 3

不。你必须制作自定义日期模板 https://ng-bootstrap.github.io/#/components/datepicker/examples#customday 那么你可以添加一个 class 如果日期是今天

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" 
                        let-selected="selected" let-disabled="disabled"
                        let-focused="focused">
  <!--see how add a [class.today]="isToday(date)" -->
  <span class="custom-day" [class.weekend]="isWeekend(date)" [class.focused]="focused"
        [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth"
        [class.text-muted]="disabled" [class.today]="isToday(date)">
    {{ date.day }}
  </span>
</ng-template>

在您的 .ts 中添加 class.today 和函数 isToday

//in styles:
    styles: [`
        ....
        .custom-day.today{
             background-color:red
        }
  `]

//declare a variable today
     today:NgbDateStruct
//In ngOnInit()
    ngOnInit()
    {
        let date=new Date();
        this.today={year:date.getFullYear(),month:date:getMonth()+1,day=date.getDate()}
    }
//Our function isToday()
    isToday(date:NgbDateStructur)
    {
        if (!today)
             return false;
        return date.Year==this.today.Year && 
               date.Month==this.today.Month && 
               date.Day==this.today.Day
    }

如何在日期选择器日历中突出显示当前日期？

How to highlight current day in date picker calendar?

bootstrap-4

ng-bootstrap

angular