jQuery datepicker in Angular FormControl

Question

I have a problem with binding value with DateTimePicker jQuery from xdsoft : https://xdsoft.net/jqplugins/datetimepicker/

I built FormControl using ReactiveFormsModule

I have <form [formGroup]="myForm">

And there are two inputs in it:

<input type="text" formControlName="name">
<input type="text" id="datetimepicker" formControlName="date" />

FormControl for "name" works fine.

However, FormControl for "date" doesn't show any values in:

{{ myform.value | json }}

StackBlitz:

https://stackblitz.com/edit/angular-mmsjj7?file=src/app/app.component.ts

GIF showing the problem:

Answer 1

Try this -

$('#datetimepicker').datetimepicker({
      timepicker: false,
      format: 'd.m.Y',
      onClose: (dateText, inst) => {
      this.myForm.controls['date'].setValue(dateText);
    }
    });

Update

Just remove form control from the date as we are assigning explicitly value to his control.

<input type="text" formControlName="name">
<input type="text" id="datetimepicker" />

Working example