Hi,

I create a reactive form component with a datePicker field, and try to initiate it with a custom date. But when I do, everything looks good, except the big date displayed.

After some attempts, I found that the "tmp" variable is not updated. I have to update it myself.

Here is my code :

<form [formGroup]="form">
<mdb-date-picker #startedAtPicker id="started_at" name="started_at" formControlName="started_at" [options]="{closeAfterSelect: true}" placeholder="Start At" (dateChanged)="dateChanged($event)"></mdb-date-picker>

<div class="text-center mt-1-half">
<button mdbBtn class="mb-2 waves-light aqua-gradient" data-dismiss="modal" [disabled]="!form.valid" mdbWavesEffect rounded="true" (click)="onSubmit($event)">
<i class="fa fa-plus-circle"></i>
Create
</button>
</div>
</form>

export class MainHarvestCreateModalComponent implements OnInit, OnDestroy {

private form: FormGroup;
@ViewChild('startedAtPicker') startedAtPicker: MDBDatePickerComponent;

constructor(
private _fb: FormBuilder,
) {
this.form = _fb.group({
started_at: [moment().startOf('day').subtract(7, 'days').format('DD/MM/YYYY'), Validators.required],
});
}

ngOnInit() {
// Without this code, the date displayed is today
const startedAtDate = moment().startOf('day').subtract(7, 'days');
this.startedAtPicker.tmp = {
year: startedAtDate.year(),
month: startedAtDate.month() + 1,
day: startedAtDate.date(),
};
}
}