Search code examples
angularng-bootstrapngb-datepicker

Navigation customization

I'm trying to customize the navigation of the ngbDatepicker component, as there is no exported template to customize the navigation, I'm trying to create a component to be inserted into footerTemplate.

<ngb-datepicker
  #dp
  [(ngModel)]="model"
  (navigate)="date = $event.next"
  navigation="none"
  [footerTemplate]="footerCalendar"
/>
<input
  class="form-control"
  placeholder="yyyy-mm-dd"
  name="dp"
  [(ngModel)]="model"
  ngbDatepicker
  #d="ngbDatepicker"
  navigation="none"
  [footerTemplate]="footerCalendar"
/>
<ng-template #footerCalendar>
  <footer-component [dateInputPicker]="dp" />
</ng-template>

But I'm facing some difficulties implementing the navigation methods because the instance I receive from input is different from the ngb-datepicker component. Being NgbDatepicker and NgbInputDatepicker.

The image below is the model I intend to make:

enter image description here

Below is the reproduction link: https://stackblitz.com/edit/angular-mudjsn?file=src%2Fapp%2Fdatepicker-basic.html

I would like to know how it is possible to customize the navigation.

Solution

  • In the same link I posted the solution.

    https://stackblitz.com/edit/angular-mudjsn?file=src%2Fapp%2Fdatepicker-basic.html