How to use bootstrap datepicker input field in angular2

Question

I have followed the undermentioned steps and I have been able to achieve up to the following image.

1. Install nodejs of version 6.9.1. It comes with npm 3.10.8
2. Then I followed the following installation steps.
3. Now when I try to use <ngb-datepicker></ngb-datepicker> I am able to see this type of screen.

But I am not able to understand how to use input[ngbDatepicker]

I tried <input ngbDatepicker /> but only a text box appears. When I focus it, it is not showing the date picker.

Here is the link which I am using.

Answer 1

To display datepicker on focus you can use focus event of input by using template reference as below :

<input ngbDatepicker #d="ngbDatepicker" (focus)="d.open()">

Or you can add trigger toggle event of datepicker on button click as per Datepicker in a popup example of Datepicker

// Component
@Component({
  selector: 'ngbd-datepicker-popup',
  templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
  model;
}

// HTML
<div class="input-group">
  <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
  <div class="input-group-addon" (click)="d.toggle()" >
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </div>
</div>