营销活动日期选择器endDate需减1天，求代码修改位置

Hey there! Let's tackle this issue where selecting the last day of the month gets flagged as a next-month date by your backend API. The fix is to subtract one day from the endDate, and here are the best places to implement this, depending on your needs:

Option 1: Modify the nano-date-picker Component (Universal Fix) #

If this date picker is used across your app and you want this adjustment to apply everywhere, update the onDatesChange method in the component. This is where the selected dates are emitted to parent components, so adjusting it here ensures all consumers get the corrected end date:

private onDatesChange(): void {
  // Adjust the end date by subtracting 1 day
  const correctedEndDate = moment(this.datePicker.endDate).subtract(1, 'day').format();
  
  this.startDateChange.emit(this.datePicker.startDate);
  // Emit the corrected end date instead of the original
  this.endDateChange.emit(correctedEndDate);
  this.startEndDateChange.emit({
    startDate: this.datePicker.startDate,
    endDate: correctedEndDate
  });
  
  this.isOpen = false;
}

This ensures every time a user picks an end date, the value sent to the parent component is already one day earlier, fixing the backend recognition issue universally.

Option 2: Adjust in the Parent Component (Targeted Fix) #

If you only need this correction for the marketing campaign modal (and not other uses of the date picker), handle the adjustment right before sending the data to the backend. For example, in your form submission logic:

// Example submit function for the campaign form
submitCampaign(): void {
  // Create a copy of the DTO to avoid mutating original data
  const campaignData = {...this.campaignDto.dtoData};
  // Subtract 1 day from the end date
  campaignData.endDate = moment(campaignData.endDate).subtract(1, 'day').format();
  
  // Now send campaignData to your backend API
  // yourApiService.submitCampaign(campaignData).subscribe(...);
}

This keeps the date picker component untouched and only applies the fix to your specific use case.

Why These Locations? #

• The onDatesChange method is the source of date emissions from the picker, so adjusting here ensures consistency across all instances.
• Handling it in the parent component gives you control over when and where the correction applies, avoiding unintended side effects for other components using the date picker.

Just make sure you're using the same date formatting (via moment().format()) as the original code to keep the date string compatible with your backend.

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