Trying to get ngbdatepicker input value

Yaël picture Yaël · Apr 25, 2018 · Viewed 13.4k times · Source

I'm a beginner with angular 4 and I'm trying to implement a bootstrap ngbdatepicker in a website.

Here is my HTML code :

<div class="input-group ">
    <input id="datepicker" class="form-control col-7" placeholder="{{dateWording}}" ngbDatepicker #date="ngbDatepicker" required pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary picto-calender" (click)="date.toggle()" type="button"></button>
    </div>
</div>

I tried to use events as (clic) or (blur) to access to my input value by using getDate(#date.value) but nothing worked properly. Here is my getDate method which return undefined value in the browser console.

getDate(date: any) {
    this.date = date;
    console.log(this.date);
}

So my two questions are :

  • How can I get the value of my input to save it in my .ts
  • What function could I use to detect that I choose a date in the datepicker menu and save the value when the menu is closing

Hope you'll can help me and sorry for my bad english !

Answer

Chellappan வ picture Chellappan வ · Apr 25, 2018

You can use (ngModelChange) to get the date value.i have changed your code check this out

<div class="input-group ">
    <input id="datepicker" class="form-control col-7" [(ngModel)]="model" 
     placeholder="" ngbDatepicker #date="ngbDatepicker" required 
  (ngModelChange)="select(model)" pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}">
   <div class="input-group-append">
       <button class="btn btn-outline-secondary picto-calender" 
  (click)="date.toggle()" type="button"></button>
     </div>

and your component.ts should like this

   select(model){  
      console.log(model);
    }

Working Example:

https://stackblitz.com/edit/angular-xnv11x?file=app/datepicker-popup.ts