Ng2 Bootstrap 的日期選擇器在無法讀取 getFullYear() 時不斷拋出錯誤

Question

嘗試使用 ng2-bootstrap 中的日期選擇器禁用日期時遇到了一些問題。 在我的 app.module.ts 中，我這樣導入了庫：

import {DatepickerModule} from 'ng2-bootstrap';
@NgModule({
imports: [

    DatepickerModule.forRoot()
],

在我的 html 中：

<div class="col-sm-6 form-group has-feedback" [ngClass]="displayFeedBackCss('testDte')">
        <label for="testDte">TEST DATE<span class="text-danger">*</span></label>
        <datepicker
            [(ngModel)]="testDte"
            [showWeeks]="true"
            [minDate]="minDate"
            [dateDisabled]="disabledDate"
            [onlyCurrentMonth]=true
        ></datepicker>
    </div>

在我的 ts 文件中：

disabledDate:any;
date:Date;

ngOnInit(): void {
this.date = new Date();
this.disabledDate = [
  {dt: this.date.getDate()-1, mode: 'day'},
  {dt: this.date.getDate()-2, mode: 'day'}
];
}

但是，我一直在控制台中收到此錯誤消息：

EXCEPTION: Error in ./e class e - inline template:25:6 caused by: Cannot read properties of undefined (reading 'getFullYear')
e.handleError @ vendor.2b9f55e0bbcf755a8964.js:30
vendor.2b9f55e0bbcf755a8964.js:30 ORIGINAL EXCEPTION: Cannot read properties of undefined (reading 'getFullYear')

我什至嘗試將日期硬編碼為“2021-12-16”和“16/12/2021”。 但是，相同的錯誤消息仍然顯示。 有任何想法嗎？

謝謝！

Answer 1

似乎問題在於datesDisabled配置需要是根據文檔的 Dates 數組。 而且您似乎使用過dateDisabled （缺少's'）

所以你的模板代碼應該改變

       <datepicker
            [(ngModel)]="testDte"
            [showWeeks]="true"
            [minDate]="minDate"
HERE >>>>   [datesDisabled]="disabledDate"
            [onlyCurrentMonth]=true
        ></datepicker>

並且您的組件代碼還需要根據文檔進行調整，以便可以正確解釋傳遞給datesDisabled配置的內容。

文檔中的示例：

  disabledDates = [
    new Date('2020-02-05'),
    new Date('2020-02-09')
  ];

Answer 2

請注意， ng2-bootstrap已被棄用。 我建議轉移到ngx-bootstrap

install ngx-bootstrap --save

並參考法比奧的回答。

以下是舊版本。

dateDisabled選項采用

dateDisabled ( ?Array<{date:Date, mode:string}> ) - 如果mode為day或 years 等，則禁用日期數組。

ngOnInit(): void {
    this.date = new Date();
    let disabledStartDate = new Date();
    disabledStartDate.setDate(this.date.getDate()-1);
    let disabledEndDate = new Date();
    disabledEndDate.setDate(this.date.getDate()-2);
    this.disabledDate = [
        {dt:disabledStartDate , mode: 'day'},
        {dt:disabledEndDate , mode: 'day'}
    ];
}