How to get value from a bootstrap datepicker input with angular 7

Question

I'am coding with angular 7 and bootstrap 4. I used bootstrap datepicker to select date and trying to get data from it .

My html code is like that :

<div class="col-lg-8 form-group">
      <input id="startDate" type="text" placeholder="From" 
      class="form-control" bsDatepicker
      [bsConfig]="{ adaptivePosition: true, 
      dateInputFormat:'YYYY-MM-DD'}" (change)="onDateSelect($event)" >
</div>

and the JavaScript function is:

 selectedStartDate: string;
 onDateSelect(event) {
     this.selectedStartDate = event.target.value;
     console.log(this.selectedStartDate)
   }

I'm getting "undefined" as a result.

selectedStartDate = undefined

can anyone help me to get the value of the selected date from the bootstrap datepicker ?

<div class="col-lg-8 form-group"> <input id="startDate" type="text" placeholder="From" class="form-control" bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat:'YYYY-MM-DD'}" #value (change)="onDateSelect(value.value)" > </div> //Now this function will have value selectedStartDate: string; onDateSelect(event) { this.selectedStartDate = event.target.value; console.log(this.selectedStartDate) } — Nambi N Rajan
– Nambi N Rajan, Commented Jul 24, 2019 at 13:38
Did you tried console the parameter itself ,(event.target.value) this will not work — Nambi N Rajan
– Nambi N Rajan, Commented Jul 24, 2019 at 13:58
Yes and it was "undefined" too. the solution proposed by ahmeticat below worked. — user8845321
– user8845321, Commented Jul 24, 2019 at 14:08

ahmeticat · Accepted Answer · 2019-07-24 13:53:09Z

1

You can use with ngModel property and ngModelChange function.

For example change your html

<input id="startDate" type="text" placeholder="From" 
      class="form-control" bsDatepicker [(ngModel)]="selectedStartDate"
      [bsConfig]="{ adaptivePosition: true, 
      dateInputFormat:'YYYY-MM-DD'}" (ngModelChange)="updateMyDate($event)" >

and ts file

updateMyDate(newDate) {
    console.log(newDate);
}

answered Jul 24, 2019 at 13:53

ahmeticat

1,9391 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8845321 Over a year ago

Thank you, it worked ! But can you please explain the need of "selectedStartDate" in HTML while I'm not really using it in the TS file following your solution?

ahmeticat Over a year ago

I set selectedStartDate is a ngModel and we can use ngModelChange.So angular trigger to our ngModelChange when model changed

Ali Maleki · Accepted Answer · 2019-07-24 13:33:48Z

0

<div class="col-lg-8 form-group">
      <input id="startDate" type="text" placeholder="From" 
      class="form-control" bsDatepicker [(ngModel)]="selectedStartDate"
      [bsConfig]="{ adaptivePosition: true, 
      dateInputFormat:'YYYY-MM-DD'}" >
</div>

you will have date in "selectedStartDate"

answered Jul 24, 2019 at 13:33

Ali Maleki

3001 gold badge6 silver badges20 bronze badges

1 Comment

user8845321 Over a year ago

I tried that and didn't work. Also I don't really need a two way binding as all what I need is to get the selected date from the template.

Collectives™ on Stack Overflow

How to get value from a bootstrap datepicker input with angular 7

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related