Skip to main content

angular bootstrap - Datepicker navigate event

app.component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  //model:NgbDateStruct;
  model:any
  
  today:Date = new Date();
  
  date:{year:number,month:number} = {
    year: this.today.getFullYear(),
    month: this.today.getMonth() + 1
  };

  constructor(private calendar: NgbCalendar) { }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Datepicker navigate event
</h4>

<h5><b>Current Navigation:</b></h5>
<h5>{{'Year '+ date.year + ' : Month ' + date.month}}</h5>
<br/>

<ngb-datepicker 
  #datePicker 
  [(ngModel)]="model"
  (navigate)="date=$event.next">
</ngb-datepicker>
More Angular tutorials
Labels: