CODEWITHSUNDEEP
angularinputdatepicker
Venomoustoad
Venomoustoad

Reputation: 1213

How to pick up changes on input date field updated in angular 8 (bs-datepicker)?

I am trying to set the end_date input automatically to match the start_date upon selection using the bsDatepicker in angular.

html within myForm

<input #start_date type="text" (blur)="set_end_date(start_date.value)" formControlName="start_date"  bsDatepicker [bsValue]="bsValue"  [bsConfig]="bsConfig"  >
<input type="text" formControlName="end_date" bsDatepicker [bsValue]="bsValue" [bsConfig]="bsConfig"/>

component.ts

  set_end_date(val){
    this.myForm.patchValue({
      end_date: val
    })
  }

The blur event does not seem to work correctly. For instance if I set to start_date 23 Sep 2019 it updates end date to blank. And then, if I change start date to 25 Oct 2019, it sets the end date to 23 Sep (basically the previously set start_date). This suggests to me that there is some kind of latency that is not allowing the correctly set start_date to be passed on when the (blur) event is called. Is my understanding right?

I also tried the (change) event that does not seem to work at all(event not picked up). How do I resolve this?

Upvotes: 1

Views: 1191

Answers (2)

riorudo
riorudo

Reputation: 1227

You can change the trigger for the chageDetection on your formControl:

new FormControl('', {updateOn: 'blur'});

Than subscribe to the changeEvent:

this.myForm.get('start_date').valueChanges.subcribe(...)

In order to get the actual value of the start_date:

this.myForm.patchValue({
  end_date: this.form.get('start_date').value
})

Upvotes: 0

jitender
jitender

Reputation: 10429

Instead on using blur Try using bsValueChange event to get the updated date

<input #start_date type="text" (bsValueChange)="set_end_date($event)" formControlName="start_date"  bsDatepicker [bsValue]="bsValue"  [bsConfig]="bsConfig"  >

demo value change

Upvotes: 2

Related Questions