Ng2 Bootstrap 的日期选择器在无法读取 getFullYear() 时不断抛出错误

Posted 2023-05-07

【中文标题】Ng2 Bootstrap 的日期选择器在无法读取 getFullYear() 时不断抛出错误

【英文标题】：Date Picker from Ng2 Bootstrap keep throwing error on unable to read getFullYear()

【发布时间】：2022-01-17 10:27:13

【问题描述】：

我在尝试使用来自 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”。但是，相同的错误消息仍然显示。有什么想法吗？

谢谢！

【问题讨论】：

您的dateDisabled 需要采用日期值。 dt: this.date.getDate()-1, mode: 'day' 不是。 let disabledDate = new Date(); disabledDate.setDate( this.date.getDate()-1)

另外，npmjs.com/package/ng2-bootstrap 早已被弃用。你可能想升级到ngx-bootstrap

【参考方案1】：

请注意，ng2-bootstrap 已被弃用。我建议转到ngx-bootstrap

install ngx-bootstrap --save

并参考The Fabio'sanswer。

以下是旧版本。

dateDisabled 选项采用

dateDisabled (?Array<date:Date, mode:string>) - 如果mode 是day 或年份等，则禁用日期数组。

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 = [
        date:disabledStartDate , mode: 'day',
        date:disabledEndDate , mode: 'day'
    ];

【讨论】：

嗯，我改用了这个解决方案，但我仍然收到相同的错误消息 Cannot read properties of undefined (reading 'getFullYear')

minDate 是什么？还有testDte?

minDate 是最小日期，最小日期之前的日期将被禁用。如果我注释掉 dateDisabled，则 minDate 正在工作

@BlackMamba 密钥不是dt。数组中为date

很抱歉，可以与您核实一下，您知道正确的日期格式是什么吗？是“DD/MM/YYYY”还是“YYYY-MM-DD”？例如，如果我有一个格式为“09/12/2021”的日期列表，在这种情况下我该如何设置？

【参考方案2】：

似乎问题在于datesDisabled 配置需要是根据the docs 的日期数组。而且你好像用过dateDisabled (missing 's')

所以你的模板代码应该改变

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

您的组件代码也需要根据docs 进行调整，以便可以正确解释传递给datesDisabled 配置的内容。

文档中的示例：

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

【讨论】：

这是给ngx-bootstrap的。从import语句来看，import DatepickerModule from 'ng2-bootstrap'; OP 正在清除使用旧版本。

很公平，我的建议是升级并遵循这个答案而不是...... ;-)

我更改为 datesDisabled 但我收到错误消息：无法绑定到 'datesDisabled'，因为它不是 'datepicker' 的已知属性。

@BlackMamba Suraj 的评论是正确的。这个答案适用于当前版本的 ngx-bootstrap。我的建议是让您在使用我的答案之前升级

@BlackMamba npm install ngx-bootstrap --save 并检查 github.com/valor-software/ngx-bootstrap。如果您由于某种原因无法升级，请使用我的答案。