PrimeNg15+Angular14：如何实现结束日期晚于开始日期一天且初始禁用？

你的问题核心是Date对象的引用共享导致的：直接将startDateValue赋值给endMinDate后，修改endMinDate的日期会同时改变startDateValue，导致结束日期的最小限制没有真正生效。下面是具体的修复方案：

1. 修复TS代码中的Date引用问题 #

修改setEndDate方法，创建startDateValue的副本再调整日期，避免修改原开始日期对象：

setEndDate() {
  this.allowEndDate = true;
  // 创建开始日期的独立副本，避免引用共享
  this.endMinDate = new Date(this.startDateValue);
  // 将结束日期的最小限制设为开始日期+1天
  this.endMinDate.setDate(this.endMinDate.getDate() + 1);
  // 自动设置结束日期为默认的开始日期后一天（按需求保留）
  this.endDateValue = new Date(this.endMinDate);
  // 同步表单控件值（替换成你的实际FormGroup实例名）
  this.yourFormGroup.get('endDate')?.setValue(this.endDateValue);
}

2. 优化HTML模板 #

移除模板中的注释（避免解析异常），确保绑定逻辑清晰：

<p-calendar
  [(ngModel)]="startDateValue"
  [showTime]="false"
  [minDate]="minDateValue"
  formControlName="startDate"
  (onSelect)="setEndDate()">
</p-calendar>

<p-calendar
  [(ngModel)]="endDateValue"
  [showTime]="false"
  [minDate]="endMinDate"
  formControlName="endDate"
  [disabled]="!allowEndDate">
</p-calendar>

3. 额外优化（可选） #

如果用户修改开始日期后，当前选中的结束日期早于新的最小限制，可以自动修正结束日期：

setEndDate() {
  this.allowEndDate = true;
  this.endMinDate = new Date(this.startDateValue);
  this.endMinDate.setDate(this.endMinDate.getDate() + 1);
  
  // 检查当前结束日期是否合法，不合法则自动调整
  if (this.endDateValue && this.endDateValue < this.endMinDate) {
    this.endDateValue = new Date(this.endMinDate);
    this.yourFormGroup.get('endDate')?.setValue(this.endDateValue);
  }
}

问题原因说明 #

Date是引用类型，直接赋值this.endMinDate = this.startDateValue会让两个变量指向同一个内存对象。当你调用setDate(+1)时，原startDateValue也会被修改，导致结束日期的minDate实际上和修改后的开始日期一致，失去了限制效果。通过new Date(this.startDateValue)创建副本，就能保证两个对象独立，限制规则正常生效。

内容的提问来源于stack exchange，提问作者Tanzeel