Unable to display date in component

Question

I am building the ionic app(v-4),I am unable to display the date from the api. My JSON looks like this:

{
user_name: "Jhon"
status: "Open"
meeting_date: "31-08-2019"
remark: "No remarks"
request_id: 958
}

I have tried to display the date in <ion-datetime> as shown below:

HTML

  <form [formGroup]="editForm">
     <ion-item>
            <ion-label position="stacked">Date</ion-label>
            <ion-datetime formControlName="meeting_date" [(ngModel)]="resObj.meetingDate"></ion-datetime>
      </ion-item>
 </form>

TS

public resObj;
ngOnInit() {
    this.resObj = this.navParams.data.paramRequest;
    this.updateForm = this.fb.group({
      remark : [null],
      .
      .
      meeting_date: [null],
    });
  }

I got this error: Error parsing date: "undefined". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime

So i tried this solution ===> ionic 2 ion-datetime ISO Format issue

i,e Using ISO format before displaying the date in the template like this:

HTML

  <form [formGroup]="editForm">
     <ion-item>
            <ion-label position="stacked">Date</ion-label>
            <ion-datetime formControlName="meeting_date" [(ngModel)]="meetingDate "></ion-datetime>
      </ion-item>
 </form>

TS

public resObj;
ngOnInit() {
    this.resObj = this.navParams.data.paramRequest;
    const meetingDate =  this.resObj.meeting_date.toISOString(); <======
    this.updateForm = this.fb.group({
      remark : [null],
      .
      .
      meeting_date: [null],
    });
  }

Still i was unable to show date in ion-datetime

I am unable find what went wrong.

Radu Tataru · Answer 1 · 2019-08-26T12:34:38.143

0

I sugest to use moment and then you could even create a pipe like described here. You could use it like this:

<span >{{ resObj.meetingDate | momentPipe: 'dddd D MMM YYYY' }}</span>

other formats here.

UPDATE: create o form

public someForm: FormGroup;
  ngOnInit() {
    this.initSomeForm();
  }
  initSomeForm() {
    this.someForm = new FormGroup({
      userName: new FormControl(this.resObj.user_name, [Validators.required]),
      meetingDate: new FormControl(this.resObj.meeting_date, [Validators.required]),
      status: new FormControl(this.resObj.status, [Validators.required]),
      remark: new FormControl(this.resObj.remark),
      requestId: new FormControl(this.resObj.request_id),
    });
  }

in html

  <form [formGroup]="someForm">
<ion-item>
       <ion-label position="stacked">Date</ion-label>
       <ion-datetime formControlName="meetingDate" displayFormat="MM DD YY"></ion-datetime>
 </ion-item>

edited Aug 26 '19 at 12:34

answered Aug 26 '19 at 11:59

Radu Tataru

49
5

Without using `moment.js` and `pipes` is it possible to do? – Shankar Aug 26 '19 at 12:00
Please read my edited question, I want to display the date in `` component not in any `tags`. – Shankar Aug 26 '19 at 12:02
I am able add the `date` from ``, But couldn't able to bind, Since i need 2 way data binding to update the `JSON object`. – Shankar Aug 26 '19 at 12:04
you are binding the to a const, not to a JSON object, remove ngModel, bind formControl to JSON object property – Radu Tataru Aug 26 '19 at 12:16
i updated the answer, i use reactiveForms, https://angular.io/guide/reactive-forms – Radu Tataru Aug 26 '19 at 12:35
I have already tried this approach (reactive-forms), Still throwing this warning: **Error parsing date: "undefined". Please provide a valid ISO 8601 datetime format** – Shankar Aug 26 '19 at 12:49
try to console.log(this.navParams.data.paramRequest); – Radu Tataru Aug 26 '19 at 12:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198488/discussion-between-shankar-and-radu-tataru). – Shankar Aug 26 '19 at 13:03
Log result ===> `bell_count: 0 user_name: "Jhon" m_status: "Open" meeting_date: "31-08-2019" provider_action: false remark: "No remarks" request_id: 958 service_name: "Service 1"` – Shankar Aug 26 '19 at 13:11

Unable to display date in component

1 Answers1