如何使用Ionic实现当前日期与时间的展示功能

• 生命周期使用错误：ngOnInit阶段通过@ViewChild获取的ion-datetime实例未完成挂载，此时调用setValue不会生效
• 冗余的组件实例操作：你已使用响应式表单，直接给FormControl赋值即可自动同步到视图，无需操作ion-datetime的DOM实例
• setTimeout未设置延迟时间，默认同步执行时组件仍未初始化完成

你不需要保留@ViewChild相关逻辑，直接对表单控件赋值即可，修改后的代码如下：

HTML代码（无变更） #

<ion-datetime
#dateTime
displayFormat="MMM DD, YYYY HH:mm"
formControlName="myDate"></ion-datetime>

TypeScript代码 #

export class App{
  form: FormGroup
  myDate: FormControl = new FormControl('', Validators.required)

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      myDate: this.myDate
    });
    // 直接赋值即可同步到ion-datetime组件
    this.myDate.setValue(new Date().toISOString());
  }
}

• 如果你使用的是Ionic 6及以上版本，可给ion-datetime添加showDefaultButtons="true"属性，快速展示确认/取消按钮，降低用户操作成本
• 如果出现显示时间和本地时间有偏差的问题，可以在赋值前调整ISO字符串的时区偏移，适配当前地区时间

内容的提问来源于stack exchange，提问作者bala