Reactive form date picker in ionic 5

Issue

I have using date pickr in reactive form

date picker ionic

The example is in template driven form..am using reactive form.

Is some one using reactive form date picker ..How to do that? Please let me know i need (only display DD-MM-YYYY) and send date to server ...thanks

Solution

Try to use ion-datetime framework date picker instead of native date picker. https://ionicframework.com/docs/api/datetime . You can get value using formControlName. No need to add method to ts if you don't want to modify the date picker options.Just simply can get value using formcontrol.

Html

    <ion-item class="">
      <ion-label class="" position="floating">Date</ion-label>
      <ion-datetime formControlName="datePckr" value="{{modifyDate}}"></ion-datetime>
    </ion-item>

Ts

import { DatePipe } from "@angular/common";

...

currentDate: any;

...

  constructor(private datePipe: DatePipe,) {
    this.currentDate = new Date();
    this.modifyDate = this.datePipe.transform(this.currentDate, "y-M-d");
  }

If you want realtime check the value, then add (ngModelChange)="func($event)" Need to send $event every time.

Html

    <ion-item class="">
      <ion-label class="" position="floating">Date</ion-label>
      <ion-datetime formControlName="datePckr" value="" 
      (ngModelChange)="checkVal($event)></ion-datetime>
    </ion-item>

Ts

    checkVal(eve: any) {
       console.log(eve);   //write here what you want
    }

Answered By - Janitha Rasanga