Ng zorro 7 days range from today-CodePudding

I'm using ng zorro date range picker and when I select first day I want to add 7 days from that day and show it. So user can only select start date, but it needs to show that range [start date 7 days] any suggestion or I have to do it custom with html.. the best thing would be, if ng zorro date range picker have option to get event when selecting first date.

CodePudding user response：

It sounds like you want to use the ng-zorro date range picker to allow users to select a start date and then automatically select a range of 7 days from that start date. You can achieve this by using the nzOnCalendarChange event. This event is emitted whenever the selected date range changes.

Here is an example of how you could use the nzOnCalendarChange event to automatically select a range of 7 days from the start date:

<nz-date-picker
  nzOnCalendarChange="onCalendarChange($event)"
></nz-date-picker>

onCalendarChange(event: Date[]) {
  if (event.length === 1) {
    // Only a start date has been selected, so add 7 days to the start date
    // to get the end date and update the selected date range
    const endDate = event[0].addDays(7);
    this.dateRange = [event[0], endDate];
  }
}

This code uses the addDays method to add 7 days to the start date and then updates the selected date range to include the start date and the calculated end date.