如何重置p日历中的[maxDate] [minDate]

Question

问题描述

我正在我的 Angular 应用程序中使用 PrimeNG 的

p-calendar

组件。我有两个日期选择器：一个用于选择开始日期，另一个用于选择结束日期。结束日期选择器不应允许选择开始日期加上一天之前的日期，反之亦然。为了实现此目的，我在开始日期选择器上使用

maxDate

属性，在结束日期选择器上使用

minDate

属性。

以下是组件的相关代码：

HTML：

<div class="field">
  <p-calendar
    inputId="startDt"
    formControlName="startDt"
    (onSelect)="setEndDate()"
    [maxDate]="startMaxDate"
  ></p-calendar>
</div>

<div class="field">
  <p-calendar
    inputId="endDt"
    formControlName="endDt"
    (onSelect)="setStartDate()"
    [minDate]="endMinDate"
  ></p-calendar>
</div>

打字稿：

startMaxDate!: Date;
endMinDate!: Date;

setEndDate() {
  const startDateValue = this.form.get('startDt')?.value;
  if (startDateValue) {
    this.endMinDate = new Date(startDateValue.getTime());
    this.endMinDate.setDate(this.endMinDate.getDate() + 1);
  } 
}

setStartDate() {
  const endDateValue = this.form.get('endDt')?.value;
  if (endDateValue) {
    this.startMaxDate = new Date(endDateValue.getTime());
    this.startMaxDate.setDate(this.startMaxDate.getDate() - 1);
  } 
}

clearSearchCondition() {
  this.form.reset();
  this.dataSearch = [];
  this.showTable = false;
  this.startMaxDate = new Date(); // Resets to the current date
  this.endMinDate = new Date();   // Resets to the current date
}

问题

当调用

clearSearchCondition()

方法时，它会重置表单并将

startMaxDate

和

endMinDate

设置为当前日期。尽管有这些更改，

p-calendar

组件仍然根据之前的

maxDate

和

minDate

值禁用日期。清除表单后，日历组件似乎没有按预期更新其日期约束。

我需要什么帮助

我需要帮助以确保清除表单数据时正确重置

maxDate

组件的

minDate

和

p-calendar

属性。具体来说，我正在寻找：

1. 执行

   p-calendar

   时，如何强制

   clearSearchCondition()

   组件刷新或重新初始化其日期约束。

2. 确保日期选择器在清除表单后反映更新的

   maxDate

   和

   minDate

   值的任何其他步骤或最佳实践。

附加信息

• 我使用的是PrimeNG版本16.9.1

• 日历组件应允许在重置约束后选择任何日期。

谢谢您的帮助！

Answer 1

将日期设置为

null

，这将为日期选择器启用所有日期，并准备好接受任何输入。

clearSearchCondition() {
    this.form.reset();
    // this.dataSearch = [];
    // this.showTable = false;
    this.startMaxDate = null; // Resets to the current date
    this.endMinDate = null; // Resets to the current date
}

Stackblitz 演示