ow can I get the value of a date by clicking?

[Jhon18]

I am using p-calendar with the date range, I see that he can only play with two ranks. the problem is that when I give the first range by default I must give a suggestion of three days, that is, when I click on it, it takes me in the first range a date and in the second by default it gives me the suggestion of three days, when giving again click for the user to select a date other than the suggestion re-initializes the ranges.

this.events is to know how many times I click

this is my code...

Code: Select all

 <p-calendar *ngIf="smallResolution | async" #calendarInstance [(ngModel)]="initialRangeDates" [showOtherMonths]="false" [inline]="true" [minDate]="minDate" [selectOtherMonths]="true" [numberOfMonths]="1" selectionMode="range" (onSelect)="setRangeDates()">
                <ng-template pTemplate="date" let-date>
                    <span [ngClass]="{'init-date' :
                            (date.day == dataInicial?.getDate()
                            && date.month == dataInicial?.getMonth()
                            && date.year == dataInicial?.getFullYear()),
                        'end-date' :
                            (date.day == dataFinal?.getDate()
                            && date.month == dataFinal?.getMonth()
                            && date.year == dataFinal?.getFullYear())}">
                        {{date.day}}
                    </span>
                </ng-template>
            </p-calendar>

setRangeDates() {
    this.events++;
    if (this.calendar instanceof Calendar) {
        this.group.get('departureDate').setValue(this.calendar.value[0]);
        this.group.get('arrivalDate').setValue(this.calendar.value[1]);
    } else {
        this.group.get('departureDate').setValue(this.calendar.nativeElement.selectedDateRange.startDate);
        this.group.get('arrivalDate').setValue(this.calendar.nativeElement.selectedDateRange.endDate);
    }
    if (this.events === 1) {
        const date = this.initialRangeDates[0].getTime() + (1000 * 60 * 60 * 24 * this.user.params.DeltaDateHotels);
        this.initialRangeDates[1] = new Date(date);
        this.group.get('arrivalDate').setValue(this.initialRangeDates[1]);
        this.newDate = this.initialRangeDates[0];
      } else if (this.events === 2) {
        this.initialRangeDates[0] = this.newDate;
        // this.initialRangeDates[1]
      } else if (this.events === 3) {
        this.events = 0;
      }
      if (this.initialRangeDates[1] !== null) {
        if (this.initialRangeDates[0].getTime() === this.initialRangeDates[1].getTime()) {
          const date = this.initialRangeDates[0].getTime() + (1000 * 60 * 60 * 24 * this.user.params.DeltaDateHotels);
          this.initialRangeDates[1] = new Date(date);
          this.group.get('arrivalDate').setValue(this.initialRangeDates[1]);
        }
      }
    }

I can only work with two ranges. or how can I capture the value of the date by clicking?
Thanks for your help