Trying to get ngbdatepicker input value

Question

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 !

Use [(ngModel)] or ReactiveForms or "something", see https://angular.io/guide/user-input — Eliseo, Apr 25 '18 at 08:55
I already tried some solutions from this guide. But I got the same issue each time : my input value is undefined. I must do something wrong so I'm going to try again, thanks — Yaël, Apr 25 '18 at 09:29

Chellappan வ · Answer 1 · 2018-04-25T10:02:15.850

6

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

edited Apr 25 '18 at 10:02

answered Apr 25 '18 at 09:56

Chellappan வ

23,645
3
29
60

1

Thank you, I finally succed by using [(ngModel)] ! – Yaël Apr 25 '18 at 10:04
@Yaël check my answer , to return a Date object – Niladri Apr 25 '18 at 10:06

score 2 · Answer 2 · answered Apr 25 '18 at 10:05

you can use ngModel to store the selected date in an Object of type NgbDateStruct. it contains three properties month,year and day . Then you can create a Date object from that. In this example I am setting the value of the selected date in dateSelect event of the datepicker, also the value is set in the object declared as ngModel.

HTML

<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}" [(ngModel)]="currentDateObj" name="date" (dateSelect) = "onSelect($event)">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary picto-calender" (click)="date.toggle()" type="button"></button>
    </div>
</div>

ts file code

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-datepicker-popup',
  templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
  public model:any = {};
  public selectedDate:Date;
  public dateWording:string = "yyyy-mm-dd";
  public currentDateObj:any = {};
  onSelect(evt:any){
    this.selectedDate = new Date(evt.year,evt.month-1,evt.day);
    console.log(this.selectedDate);
  }


}

Working demo : https://stackblitz.com/edit/angular-sskm4x

score 0 · Answer 3 · answered Dec 29 '21 at 13:02

Use (ngModelChange) to get datepicker value.

<input  id="datepicker"
        [(ngModel)]="model" 
        ngbDatepicker
        #date="ngbDatepicker"
        (ngModelChange)="selectDateFunc(model)"
        pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}"
        required />

<button (click)="date.toggle()"
    type="button"></button>

add this function in component.ts

       selectDateFunc( selectedDate ){  
          console.log( selectedDate );
       }

score -1 · Answer 4 · answered Apr 25 '18 at 12:24

You can use ngx-mydatepicker enter link description here

In my.component.html, add below text

<div class="input-group">
                <input class="form-control" required (click)="dp1.toggleCalendar()" #startDateTime style="float:none" placeholder="Select a date" ngx-mydatepicker name="mydate"
                    [options]="myOptions1" #dp1="ngx-mydatepicker" (dateChanged)="onStartDateChanged($event)" required/>

                <span class="input-group-btn">
                    <button type="button" class="btn btn-default my-picker" (click)="dp1.clearDate()">
                        <i class="glyphicon glyphicon-remove"></i>
                    </button>
                    <button type="button" class="btn btn-default my-picker" (click)="dp1.toggleCalendar()">
                        <i class="glyphicon glyphicon-calendar"></i>
                    </button>
                </span>
            </div>

In my.component.ts, add below function

onStartDateChanged(e){
// var dd = e.jsdate.setDate(e.jsdate.getDate() - 1);
var ddd = { year: e.jsdate.getFullYear(), month: e.jsdate.getMonth() + 1, day: e.jsdate.getDate()-1}
this.startDate = e.jsdate;
this.myOptions2 = {
  dateFormat: 'dd.mm.yyyy',
  markCurrentDay: true,
  showTodayBtn: true,
  disableUntil: ddd
};
}

On date change, onStartDateChanged() function is called.

Trying to get ngbdatepicker input value

4 Answers4