Ionic 2 beta 11：初始化日期时间组件以考虑本地时区答案

【问题标题】：Ionic 2 beta 11: Initializing datetime component to account for local timezoneIonic 2 beta 11：初始化日期时间组件以考虑本地时区
【发布时间】：2016-12-10 10:19:05
【问题描述】：

我在使用 Ionic 2 beta 11 中的 datetime 组件时遇到问题。根据我在 Ionic API documentation 中收集的信息，我应该从 Date.toISOString 中传递一个值。这工作正常，除了日期显示为 UTC 而不是设备的当前时区（PDT 用于我的目的）。例如，日期显示为：

09/19/2016 8:46 PM

而不是预期的：

09/19/2016 1:46 PM

这是我的支持类：

export class TestPage {
  private _date: Date = new Date();
  public get date(): string {
    return this._date.toISOString();
  }
}

任何我的 TestPage 模板代码：

  <ion-datetime 
      displayFormat="MM/DD/YYYY h:mm A" 
      pickerFormat="MM DD YYYY h mm A" 
      [(ngModel)]="date">
  </ion-datetime>

我可以通过首先将 Date.getTimezoneOffset 应用于日期值来解决此问题，但我宁愿避免这种情况，因为框架似乎应该考虑 UI 中的时区。

  public get date(): string {
    let n: number = this._date.getTime();
    n -= (this._date.getTimezoneOffset() * 60 * 1000);
    let d: string = new Date(n).toISOString();
    return d;
  }

这是我为演示该问题而创建的 Plunker：http://plnkr.co/edit/2iJRh1zM4pmwcNilWIcG?p=preview

【问题讨论】：

你能解决这个问题吗？

标签： angular typescript ionic2

【解决方案1】：

就像您在文档中看到的那样：

如果需要从某种格式解析日期时间值，或者操纵（例如将日期添加 5 天，减去 30 分钟，等），甚至将数据格式化为特定的语言环境，那么 我们高度推荐使用 moment.js 来“解析、验证、操作和显示 JavaScript 中的日期”。Moment.js 已迅速成为我们的 goto 标准在 JavaScript 中处理日期时间时，但 Ionic 不会预打包此依赖项，因为大多数应用程序不需要它，并且其语言环境配置应由最终开发者决定。

因此，您可以使用moment-timezone.js 中的时区方法，而不是使用Date.getTimezoneOffset 手动执行此操作，如下所示：

var jun = moment("2014-06-01T12:00:00Z");
jun.tz('America/Los_Angeles').format('MM/DD/YYYY h:mm a');

或者只是：

var timestamp = 1412144245453; // October 1st, 2014 6:17:25 AM.
moment.tz(timeStamp, 'America/Los_Angeles').format('MM/DD/YYYY h:mm a');  // Output: 09/30/2014 11:17 PM

您可以查看如何将其导入 Ionic 项目here。

【讨论】：

【解决方案2】：

我的场景 odata 服务，将日期时间返回为 ISO 8601 UTC

{ExpectedEndDate:"2016-12-01T04:00:00Z"}

我使用管道在primeng DataTable中显示

<p-column field="ExpectedEndDate" header="F.Prevista">
            <template let-col let-item="rowData" pTemplate type="body">
                <span>{{item[col.field] | date: 'dd/MM/yyyy HH:mm:ss'}}</span>
            </template>
</p-column>

这会按预期显示我当地时间 (GMT+0100) 的日期

01/12/2016 05:00:00

在我的模型属性上使用 Ionic DateTime，将编辑后的日期显示为 UTC :( 为了解决我在form.ts中这样做声明 2 个函数（我假设可以是某种全局函数）

setIonicDateTime(value: string): Date {
    if (value) {
        let date: Date = new Date(value);
        let ionicDate = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), date.getUTCMilliseconds());
        return ionicDate;
    }
    return null;
}
getIonicDateTime(value: Date): string {
    if (value) {
        let date: Date = new Date(value);
        let ionicDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
        return ionicDate.toISOString();
    }
    return null;
}

然后包装我的模型属性（编辑是我的模型）

@Input() set ExpectedEndDate(value: string) {
    this.edit.ExpectedEndDate = this.setIonicDateTime(value);
}
get ExpectedEndDate():string {
   return this.getIonicDateTime(this.edit.ExpectedEndDate);
}

在模板中，日期代码使用属性而不是模型一。

<ion-item>
    <ion-label floating>F.Prevista</ion-label>
    <ion-datetime formControlName="ExpectedEndDate"   displayFormat="DD/MM/YYYY HH:mm" [(ngModel)]="ExpectedEndDate">
    </ion-datetime>
</ion-item>

这种方式对我来说很好，总是以当地时间显示和编辑日期并以 UTC 存储。这项工作的日期总是 ISO 8601 UTC

【讨论】：