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

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>

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.

CodePudding user response：

Looks like date object clone issue for me.

when you are assigning startDate to endDate both value becomes same. This is because of javascript's object assignment behaviour. When you assign object one to another both points to the same memory.

Also don't use ngModel and formControl in same form element. Both of them are 2 different approach.

Working code below:

https://stackblitz.com/edit/primeng-calendar-demo-sieuls?file=src/app/app.component.ts

CodePudding user response：

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 = new Date(this.startDateValue.setDate(this.startDateValue .getDate()   1));
}