使用ng-bootstrap的ngbDatepicker，选择开始日期后自动设置结束日期加1天

Hey there! Let's get this date auto-setup working for you. Here's how to make the end date automatically set to one day after the start date when using ng-bootstrap's ngbDatepicker:

Option 1: Use the dateSelect Event (Template-Based) #

First, add the (dateSelect) event handler to your start date input. This triggers whenever a date is selected in the picker:

<!-- Start Date Input -->
<input 
  required 
  class="form-control" 
  placeholder="dd-MM-YYYY" 
  name="startDate" 
  ngbDatepicker 
  #d="ngbDatepicker" 
  formControlName="startDate" 
  [minDate]="minDate" 
  [readonly]="true"
  (dateSelect)="onStartDateChosen($event)"
/>

<!-- End Date Input (example structure) -->
<input 
  class="form-control" 
  placeholder="dd-MM-YYYY" 
  name="endDate" 
  ngbDatepicker 
  #endD="ngbDatepicker" 
  formControlName="endDate" 
  [readonly]="true"
/>

Then in your component, define the onStartDateChosen method. We'll use ng-bootstrap's built-in NgbCalendar service to handle date calculations (it takes care of edge cases like month/year boundaries automatically):

import { Component } from '@angular/core';
import { NgbDate, NgbCalendar, FormGroup, FormBuilder } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // ... your component metadata
})
export class YourComponent {
  public startDate: NgbDate;
  public endDate: NgbDate;
  public yourFormGroup: FormGroup;

  constructor(
    private calendar: NgbCalendar,
    private fb: FormBuilder
  ) {
    // Initialize your form group
    this.yourFormGroup = this.fb.group({
      startDate: [null],
      endDate: [null]
    });
  }

  onStartDateChosen(selectedDate: NgbDate): void {
    this.startDate = selectedDate;
    // Calculate the next day using NgbCalendar
    const nextDay = this.calendar.getNext(selectedDate, 'd', 1);
    this.endDate = nextDay;
    // Update the form control to reflect the new end date
    this.yourFormGroup.get('endDate')?.setValue(nextDay);
  }
}

Option 2: Listen to Form Control Value Changes (Component-Based) #

If you prefer handling this in the component without adding a template event, you can subscribe to the valueChanges of the start date form control. Add this in your ngOnInit:

ngOnInit(): void {
  this.yourFormGroup.get('startDate')?.valueChanges.subscribe((selectedDate: NgbDate) => {
    if (selectedDate) {
      const nextDay = this.calendar.getNext(selectedDate, 'd', 1);
      this.endDate = nextDay;
      this.yourFormGroup.get('endDate')?.setValue(nextDay);
    }
  });
}

Why Use NgbCalendar.getNext()? #

This method handles all tricky edge cases for you:

• End of month: e.g., selecting March 31 will auto-set April 1
• End of year: e.g., selecting December 31 will auto-set January 1 of the next year
• Leap years: correctly handles February 29 to March 1

If you want to implement the date logic manually (not recommended, but for reference), here's a helper function:

private addOneDay(date: NgbDate): NgbDate {
  // Get number of days in the selected month
  const daysInMonth = new Date(date.year, date.month, 0).getDate();
  
  if (date.date < daysInMonth) {
    return new NgbDate(date.year, date.month, date.date + 1);
  } else if (date.month < 12) {
    return new NgbDate(date.year, date.month + 1, 1);
  } else {
    return new NgbDate(date.year + 1, 1, 1);
  }
}

Just replace this.calendar.getNext(...) with this.addOneDay(selectedDate) if you go this route.

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