angular - ionic 2 测试版 11 : Initializing datetime component to account for local timezone

Question

我在使用 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

Answer 1

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

If datetime values need to be parsed from a certain format, or manipulated (such as adding 5 days to a date, subtracting 30 minutes, etc.), or even formatting data to a specific locale, then we highly recommend using moment.js to "Parse, validate, manipulate, and display dates in JavaScript". Moment.js has quickly become our goto standard when dealing with datetimes within JavaScript, but Ionic does not prepackage this dependency since most apps will not require it, and its locale configuration should be decided by the end-developer.

因此，与其使用 Date.getTimezoneOffset 手动执行此操作，不如使用 moment-timezone.js 中的时区方法像这样:

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 .