Ngb DatePicker - month not changing from current month even the date is changed to next month

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