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

Question

我正在尝试为表单上的时间字段获取默认值。不幸的是，我没能成功。

.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();

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

有关官方文档的更多信息:https://ionicframework.com/docs/api/components/datetime/DateTime/#display-format