Skip to main content

angular bootstrap - How to show footer in Datepicker

app.component.ts 

import { Component } from '@angular/core';
import { NgbCalendar, NgbDate, 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 = this.calendar.getToday();

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

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - How to show footer in Datepicker
</h4>

<h5><b>Selected Date:</b></h5>
<h5>{{ model | json }}</h5>
<br/>


<form class="row row-cols-sm-auto">
  <div class="col-12">
    <div class="input-group">
      <input 
        ngbDatepicker 
        class="form-control" 
        placeholder="yyyy-mm-dd"
        name="dp" [(ngModel)]="model"
        [footerTemplate]="footerTemplate"
        outsideDays="collapsed"
        #d="ngbDatepicker">
      <button (click)="d.toggle()">
        Open
      </button>
    </div>
  </div>
</form>

<ng-template #footerTemplate>
  <hr class="my-0">
  <button 
    class="btn btn-danger btn-sm m-2 float-start" 
    (click)="d.close()">
      Close
  </button>
  <button 
    class="btn btn-success btn-sm m-2 float-end" 
    (click)="model = today; d.close()">
      Today
  </button>
</ng-template>
More Angular tutorials
Labels: