CODEWITHSUNDEEP
angularbootstrap-4angular7bootstrap-datepicker
user8845321
user8845321

Reputation: 121

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

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 ?

Upvotes: 2

Views: 5359

Answers (2)

ahmeticat
ahmeticat

Reputation: 1939

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);
}

Upvotes: 1

Ali Maleki
Ali Maleki

Reputation: 300

<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"

Upvotes: 0

Related Questions