Skip to main content

angular bootstrap - Datepicker popup position & target

app.component.ts 

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

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


export class AppComponent {
  model: NgbDateStruct;

  constructor(private calendar: NgbCalendar) {
    this.model = calendar.getToday()
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Datepicker popup position and target
</h4>

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


<form class="row row-cols-sm-auto">
  <div class="col-6">
    <div class="input-group">
      
      <input 
        ngbDatepicker 
        class="form-control" 
        placeholder="yyyy-mm-dd"
        name="dp" 
        [(ngModel)]="model"
        outsideDays="collapsed"
        placement="right-top"
        [positionTarget]="dpButton"
        #datePicker="ngbDatepicker">
      
      <button #dpButton (click)="datePicker.toggle()">
        Open
      </button>

    </div>
  </div>
</form>
More Angular tutorials
Labels: