无法在 <ion-datetime> 组件中显示日期

Question

我正在构建 ionic 应用程序 (v-4)，我无法显示来自 api 的 date。我的JSON 看起来像这样：

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

我已尝试在<ion-datetime> 中显示date，如下所示：

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],
    });
  }

我收到此错误：解析日期错误：“未定义”。请提供有效的 ISO 8601 日期时间格式：https://www.w3.org/TR/NOTE-datetime

所以我尝试了这个解决方案 ===> ionic 2 ion-datetime ISO Format issue

i,e 在模板中显示 date 之前使用 ISO 格式，如下所示：

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],
    });
  }

我仍然无法在ion-datetime 中显示date

我找不到问题所在。

Answer 1

我建议使用moment，然后你甚至可以创建一个像here 描述的管道。你可以这样使用它：

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

其他格式here.

更新： 创建表单

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),
    });
  }

在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>