How to make sure that End date is always one day ahead of Start date

Question

I'm using PrimeNg 15 with Angular 14. I've two p-calendar. One for start date and other for end date. I've to make sure that End date remains disabled till the user selects a Start date. But most important thing is that End date should ALWAYS be one day ahead of start date.

HTML

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

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

TS

setEndDate() {
  this.allowEndDate = true;
  this.endMinDate = this.startDateValue; 
  this.endMinDate.setDate(this.endMinDate .getDate() + 1);
}

With this code when I selected any date from start date it is selecting one day ahead of selected date. Also in End date I'm still able to select a date which is same as start date. Please pitch in.

Answer 1

May be the problem here is that the angular change detection is not detected when you did setDate().

So you can do below workaround and try.

setEndDate() {
  this.allowEndDate = true;
  this.endMinDate = this.startDateValue.setDate(this.startDateValue .getDate() + 1);
}