使用 Ionic DateTime 分两步选择日期和时间答案

【问题标题】：Select Date and Time in 2 steps using Ionic DateTime使用 Ionic DateTime 分两步选择日期和时间
【发布时间】：2018-08-11 03:56:51
【问题描述】：

使用 Ionic DateTime 分两步选择日期和时间：我想使用 Ionic DateTime 选择日期和时间。问题是带有 pickerFormat="DD MMMM YYYY HH:mm" 的选择器变得复杂且太窄，所以我想先选择日期，然后再选择时间。有什么想法吗？

【问题讨论】：

标签： javascript angular ionic-framework ionic2 ionic3

【解决方案1】：

你总是可以像这样分开它们

<ion-item [hidden]="!!myDate">
      <ion-label>Date</ion-label>
      <ion-datetime (ngModelChange)="change(datePicker)" displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
    </ion-item>
    <ion-item [hidden]="!myDate" >
      <ion-label>Time</ion-label>
      <ion-datetime #datePicker
      (ionCancel)="myDate=undefined" displayFormat="HH:mm" [(ngModel)]="myTime"></ion-datetime>
    </ion-item>

    <h1 [hidden]="!myTime">result is {{myDate}} : {{myTime}} </h1>

然后在 ts 中

change(datePicker){    
  datePicker.open();
}

然后连接结果

this.dateTime= this.myDate + ":" + this.myTime;

这是DEMO

【讨论】：

好吧，两个字段强制用户单击两个控件对 UX 不利。我想我可以使用 *ngIf 先显示日期，设置日期后，隐藏控件并显示时间控件。然后在设置时间后，在最终控件中显示日期+时间。但是，当从日期选择跳转到时间选择时，如何直接打开时间选择器，而不强制再次点击DateTime输入显示选择器？？？
太棒了！演示效果很好！！我现在就复制。谢谢