How do you navigate in ngb-datepicker?

Question

Starting with the "Datepicker in a popup" example from ng-bootstrap (here), I tried adding another button for date navigation; however, I can't get this to work.

Any ideas would be appreciated.

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
        **<button class="btn btn-outline-secondary calendar" (click)="d.navigateTo()" type="button">Nav to this month</button>**
      </div>
    </div>
  </div>
</form>

Can you try with this https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter — shajan, Nov 07 '18 at 17:07
Thank you, that kind of works but I was hoping to avoid two way data binding with [(ngModel)]. I'm using reactive forms and would like to place a single formControlName on the input. — CharlesMaurice, Nov 07 '18 at 18:59

score 0 · Answer 1 · answered Nov 07 '18 at 21:57

use navigateTo just after toggle. You can use an auxiliar variable "auxiliar" Some like:

<button class="btn btn-outline-secondary" 
    (click)="auxiliar={year:2020,month:3}" type="button">Nav to 2020/03</button>

<div class="input-group">
  <input class="form-control" placeholder="yyyy-mm-dd"
         name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary calendar" 
      (click)="d.toggle();d.navigateTo(
          {year:!model?auxiliar.year:model.year,
           month:!model?auxiliar.month:model.month})" 
       type="button">
     </button>
  </div>
</div>

How do you navigate in ngb-datepicker?

1 Answers1