如何在 12 小时格式 Ionic 3 上获得预选时间答案

【问题标题】：How to get pre-selected time on 12-hour format Ionic 3如何在 12 小时格式 Ionic 3 上获得预选时间
【发布时间】：2018-11-16 15:29:06
【问题描述】：

我正在尝试获取表单上时间字段的默认值。不幸的是，我没有成功尝试让它工作。

.html

      <ion-item class="formField ionField">
        <ion-label color="primary" stacked>START TIME</ion-label>
        <ion-datetime
        type="time"
        name="startTime"
        displayFormat="h:mm A"
        pickerFormat="h:mm A"
        minuteValues="0,15,30,45"
        [(ngModel)]="defaultStartTime">
        </ion-datetime>
      </ion-item>

      <ion-item class="formField ionField">
        <ion-label color="primary" stacked>END TIME</ion-label>
        <ion-datetime
        type="date"
        name="endTime"
        displayFormat="h:mm A"
        minuteValues="0,15,30,45"
        [(ngModel)]="defaultEndTime"></ion-datetime>
      </ion-item>

.ts

defaultStartTime:any = new Date (new Date().toDateString() + ' ' + '5:00 AM').toISOString();
defaultEndTime:any = new Date (new Date().toDateString() + ' ' + '7:00 PM').toISOString();

这是它正在输出的内容。我知道这与.getTimezoneOffset(); 有关，但我不断收到错误消息。任何帮助将不胜感激。

更新：

defaultStartTime: string = new Date(new Date().setHours(5, 0, 0)).toISOString();
defaultEndTime: string = new Date(new Date().setHours(19, 0, 0)).toISOString();

【问题讨论】：

只是为了确认一下，您是在尝试以 AM / PM 格式的日期 + 时间在模板中显示日期 + 时间？
不，日期无关紧要。不幸的是，表单无论如何都会以 UTC 格式保存日期。
那么，您的屏幕截图是理想的输出吗？
如果您查看我的 ts 代码中的时间，这就是我想要的输出。屏幕截图就是它所显示的内容。
很快就会有答案。

标签： javascript angular time ionic3

【解决方案1】：

您应该考虑仅在模板级别更改格式，而不是在组件中。

改变这个：

defaultStartTime:any = new Date (new Date().toDateString() + ' ' + '5:00 AM').toISOString();
defaultEndTime:any = new Date (new Date().toDateString() + ' ' + '7:00 PM').toISOString();

到这里：

defaultStartTime: string = new Date(new Date().setHours(5, 0, 0)).toISOString();
defaultEndTime: string = new Date(new Date().setHours(19, 0, 0)).toISOString();

并将您的模板更改为：

      <ion-item class="formField ionField">
        <ion-label color="primary" stacked>START TIME</ion-label>
        <ion-datetime
        type="date"
        name="startTime"
        displayFormat="DDD MMM DD YYYY h:mm A"
        pickerFormat="h:mm A"
        minuteValues="0,15,30,45"
        [(ngModel)]="defaultStartTime">
        </ion-datetime>
      </ion-item>

      <ion-item class="formField ionField">
        <ion-label color="primary" stacked>END TIME</ion-label>
        <ion-datetime
        type="date"
        name="endTime"
        displayFormat="DDD MMM DD YYYY h:mm A"
        minuteValues="0,15,30,45"
        [(ngModel)]="defaultEndTime"></ion-datetime>
      </ion-item>

【讨论】：

我在 .ts 上收到此错误：datetime-util.js:229 解析日期错误：“1542366000183”。请提供有效的 ISO 8601 日期时间格式：
更新了答案。
新错误：datetime-util.js:229 解析日期错误：“Fri Nov 16 2018 05:00:00 GMT-0600（Central Standard Time）”。请提供有效的 ISO 8601 日期时间格式
我相信 Ionic 使用 ISO，所以也许这就是我遇到这么困难的原因？
用新的屏幕截图更新我的问题。如果我删除 displayFormat="DDD MMM DD yyyy " 我回到第一格。