ion-datetime does not display initial date

Question

ion-datetime does not display initial date

home.html

<ion-datetime displayFormat="DD/MM/YYYY" min="2018" max="2100" formControlName="date_of_delivery" placeholder="Select date of delivary"
        class="dateBorder"></ion-datetime>

home.ts

ngOnInit() {
 this.generalDetailForm.controls['date_of_delivery'].patchValue("16/11/2011")
}

does not display my given value Where is the mistake?

Please help and thanks in advance!

Answer 1

Use ngModel for data binding.

home.ts

export class HomePage {

      myForm: FormGroup;
      date;

      constructor() {

        this.myForm = new FormGroup({

          date_of_delivery: new FormControl('', [Validators.required])

        });
      }

      ngOnInit() {

         this.date = "2011-11-16";
    }
}

home.html

<form [formGroup]="myForm">

    <ion-datetime 
      displayFormat="DD/MM/YYYY" 
      formControlName="date_of_delivery" 
      placeholder="Select date of delivary" 
      [(ngModel)]="date"></ion-datetime>

</form>

Update

If you want to set value to ion-datetime using form control patchValue use yyyy-mm-dd format.

ngOnInit() {

 this. generalDetailForm.controls['date_of_delivery'].patchValue("2011-11-16");
}

See updated example here.