Ngb DatePicker - 即使日期更改为下个月，月份也不会从当前月份更改

Question

{{time}}

when I try to navigate from the date for next month by the logic .It does apply to the next month date but calender view is not changing to the appropriate month.

var newDate = new NgbDate(this.deliveryDate.year,this.deliveryDate.month,this.deliveryDate.day)

 let date = this.calender.getNext(newDate,"d",1)

Answer 1

From NgbDatepicker - Basic Datepicker , it requires

dp.navigateTo(/* date */)

to update the Calendar view.

To do the calendar navigation in the component,

1. Get the NgbDatepicker from HTML with id: "dp" via @ViewChild() .

2. The below code would only return the Date value but not update the Calendar view. At the same time, you need "m" to update the month.

this.calendar.getNext(newDate, 'm', 1);

3. Navigate the Calendar with the new date value.

this.dp.navigateTo(date);

import { Component, ViewChild } from '@angular/core';
import {
  NgbDateStruct,
  NgbCalendar,
  NgbDate,
  NgbDatepicker,
} from '@ng-bootstrap/ng-bootstrap';

export class NgbdDatepickerBasic {
  ...

  @ViewChild('dp') dp: NgbDatepicker;

  toNextMonth() {
    var newDate = new NgbDate(
      this.model.year,
      this.model.month,
      this.model.day
    );


    let date = this.calendar.getNext(newDate, 'm', 1);

    this.dp.navigateTo(date);
  }
}

<button class="btn btn-sm btn-outline-primary me-2" (click)="toNextMonth()">To Next month</button>

Sample StackBlitz Demo