html - PrimeNg 的 <pcalendar> 中的日期验证逻辑

我正在尝试在 PrimeNG 中设置最小和最大日期。我希望“起始日期”输入不早于今天日期的两周前。“结束日期”输入不超过今天日期的一年后。

这是我的日期字段。

<p-calendar [showIcon]="true"  [minDate]="minDate" [readonlyInput]="true" placeholder="From Date" id="setter" ></p-calendar>

<p-calendar [showIcon]="true"   [maxDate]="maxDate" [readonlyInput]="true"placeholder="To Date" id="setter"></p-calendar>

这是在我 .ts 文件中的逻辑

ngOnInit() {
    
    let today = new Date();
    let month = today.getMonth();
    let year = today.getFullYear();
    let prevMonth = (month === 0) ? 11 : month -1;
    let nextMonth = (month === 11) ? 0 : month + 4;
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setMonth(prevMonth);
    this.maxDate.setMonth(nextMonth);
    
  }

primeNG 日历视图

答案＃1

根据你所述的要求，你需要在每个日期/时间控件上都有一个 [maxDate] 属性。设置一个变量，将“起始日期”的最大值设置为不超过从现在起两周的时间：

this.fromDateMax = new Date(Date.now() + 12096e5);

还有另一个变量，用于将“至日期”的最大日期设置为从现在起的一年后：

this.toDateMax = new Date(new Date().setFullYear(new Date().getFullYear() + 1));

这两个在 ngOnInit() 中都会按照你所说的设置相应的限制。

这是用于参考的 stackblitz 以及我用来获取日期限制的两个 SO 回答：

1. Javascript 日期加 2 周（14 天）
2. 将年份添加到今天的日期

答案＃2

只需要对我的 nhOnit() 做一个小改动。它现在看起来是这样的，而且完全按我需要的方式工作。

ngOnInit() {

    let today = new Date();
    let month = today.getMonth();
    let year = today.getFullYear();
    let nextMonth = (month === 11) ? 0 : month + 4;
    this.minDate = new Date(Date.now() - 12096e5);
    this.maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
    this.maxDate.setMonth(nextMonth);

  }