Is there a way to use NgbDatepicker's navigateTo() on the component other than using it on ngAfterViewInit()?

Question

I am using the NgbDatepicker

<ngb-datepicker #dp [(ngModel)]="scheduledStartDate" [ngModelOptions]="{standalone:true}">
</ngb-datepicker>

It can be done on ngAfterViewInit() like:

@ViewChild('dp') datepicker: NgbDatepicker;

ngAfterViewInit() {
    this.datepicker.navigateTo({ year: new Date().getFullYear(), month: new Date().getMonth(), day: new Date().getDate() });
}

But is there a way to use navigateTo() on some other function ??

You can use it programmatically once you're sure the view has been initialised...what do you want to do ? — Will Alexander, Sep 08 '20 at 06:29
I want the Datepicker to open a particular month. How can it be used programmatically? @WillAlexander — Nehal Jaisalmeria, Sep 08 '20 at 06:49
Once the view is initalised (hence why you're using it in `ngAfterViewInit`), you can call the DatePicker's `navigateTo` method from anywhere. — Will Alexander, Sep 09 '20 at 07:46
No, it gives an error: `ERROR TypeError: Cannot read property 'navigateTo' of undefined` — Nehal Jaisalmeria, Sep 09 '20 at 08:00

Akash · Accepted Answer · 2020-09-10T08:56:26.357

You cannot use NgbDatepicker until it is initialised. To be sure that it is available, we have ngAfterViewInit hook. So if you want to do some initialisation, you can do it in ngAfterViewInit. But if you still want to use it from some function which is called before view initialisation (let's say constructor since you did not show us where you're calling it from), you can use setTimeout as a workaround but I don't recommend doing that. See below component for instance -

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {

  @ViewChild('dp') datepicker: NgbDatepicker;
  scheduledStartDate: NgbDateStruct = {year: 2222, month: 10, day: 10};
constructor(private calendar: NgbCalendar) {
  console.log(this.datepicker? 'NgDatePicker is available': 'NgDatePicker not initialized');
  setTimeout(() => {
    this.datepicker.navigateTo({year:2090, month: 10});
  }, 1000);
}
ngAfterViewInit() {
    console.log(this.datepicker? 'NgDatePicker is available': 'NgDatePicker not initialized');
}
}

Please check this stackblitz example which works just fine. The app.component.html has two buttons to navigate to two different years.

Update:

You can also use startDate in your <ngb-datepicker> -

<div *ngIf="addEditForm">
    <ngb-datepicker #dp [(ngModel)]="scheduledStartDate"  [startDate]="scheduledStartDate" (navigate)="date = $event.next" *ngIf="addEditForm"></ngb-datepicker>
 </div>

And then keep changing scheduledStartDate instead of using this.datepicker.navigateTo({})

openAddForm() {
    this.addEditForm = true;
    this.scheduledStartDate = {year: 5555, month: 10, day: 10};
  }

Refer to this api document to know more.

In my case, on the function in which I'm using the navigateTo button opens the form. I have tweaked your stackblitz a little to fit to my example. https://stackblitz.com/edit/ngb-datepicker-popup-jumping-cfcgyt and you can see the error there. — Nehal Jaisalmeria, Sep 10 '20 at 08:19
@Neha See the `openAddForm()` in https://stackblitz.com/edit/ngb-datepicker-popup-jumping-fqfsiy?file=app/app.component.ts. It takes some time for the element to be available in the `dom` before you can use it. — Akash, Sep 10 '20 at 08:32
The `navigateTo ` still gives an error, but the `[startDate]` this worked for me. Thanks @Akash — Nehal Jaisalmeria, Sep 10 '20 at 09:13

score 0 · Answer 2 · answered Sep 16 '20 at 12:19

If you want to set any specific date then :

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

and using button events :

<button class="btn btn-sm btn-outline-primary mr-2" (click)="dp.navigateTo()">To current month</button>

<button class="btn btn-sm btn-outline-primary mr-2" (click)="dp.navigateTo({year: 2021, month: 2})">To Feb 2021</button>

and In component -

import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap'; export class NgbdDatepickerBasic {

model: NgbDateStruct; date: {year: number, month: number};

constructor(private calendar: NgbCalendar) {}

selectToday() {this.model = this.calendar.getToday();} }

Refer to https://stackblitz.com/run?file=src%2Fapp%2Fdatepicker-basic.ts

without ngAfterViewInit()

Is there a way to use NgbDatepicker's navigateTo() on the component other than using it on ngAfterViewInit()?

2 Answers2