Angular 2 日期时间格式导致不正确的时间出现答案

【问题标题】：Angular 2 datetime formatting causing incorrect time to appearAngular 2 日期时间格式导致不正确的时间出现
【发布时间】：2017-03-20 02:53:19
【问题描述】：

所以我从 Ionic 应用程序的数据库中返回了一些日期时间。返回的数据是正确的，但是当我使用 Angular 推荐的格式化日期时间的方式时，时间会变成不正确的东西。

我想要做的就是获取我的日期时间并简单地显示时间，忽略一天/月/年的日期。

例如：

我回来的时间是这个2017-03-19T08:00:00

当我使用shortTime 只返回时间时，这就是我的浏览器2:00 AM 中显示的内容。

问题：造成这种时间格式差异的原因是什么？我可以做些什么来解决这个问题？

编辑：这是我返回的数据和前端 html 的屏幕截图

home.html

<ion-item text-wrap *ngFor="let item of dateEvent">
    <p><b>Event Start:</b> {{item.EventStart | date:'shortTime'}}</p>
    <p><b>Event End:</b> {{item.EventEnd | date:'shortTime'}}</p>
    </ion-item>
  </ion-item>
  <ion-item *ngIf="!hasEvent" text-wrap>
    <p >Looks like you don't have any events on {{dateTime | date: 'MM/dd/YYYY'}}!</p>
  </ion-item>
  <h6 text-center="true"><b>NEXT EVENT:</b></h6>
  <ion-item *ngIf="hasNextEvent">
  <ion-item text-wrap *ngFor="let item of nextEvent">
    <p><b>Date:</b> {{item.EventStart | date:'MM/dd'}}</p>
    <p><b>Event Start:</b> {{item.EventStart | date:'shortTime'}}</p>
    <p><b>Event End:</b> {{item.EventEnd | date:'shortTime'}}</p>
    </ion-item>
  </ion-item>
  <ion-item *ngIf="!hasNextEvent" text-wrap>
      <p >Looks like you don't have any future events scheduled!</p>
    </ion-item>
</ion-content>

【问题讨论】：

你在哪个时区？
山地时间..
在您工作的系统上是否正确设置？检查系统上的日期和时间设置。

标签： html angular datetime ionic-framework

【解决方案1】：

您在提供的对象中获得的日期是2017-03-19T08:00:00 UTC 日期，等于同一天的2:00 AM (Mountain Time)。你不必担心它。 JavaScript 总是先将日期转换为本地时区，然后再将其显示在浏览器中。同样，当我们输入一个日期时，它采用本地时区并作为 UTC 日期传送到服务器。

我刚刚尝试使用您提供的相同日期时间。它向我展示了Sun Mar 19 2017 13:30:00 GMT+0530 (India Standard Time)。

【讨论】：

【解决方案2】：

使用该值似乎可以正常工作。你确定你的值是正确的吗？

这是一个使用 shortTime 的日期过滤器的工作示例：

(function() {

  'use strict';

  angular.module('app', []);

})();

(function() {

  'use strict';

  angular.module('app', []).controller('MainController', MainController);

  MainController.$inject = ['$filter'];

  function MainController($filter) {

    var vm = this;

    vm.date = "2017-03-19T08:00:00";
    
    vm.formattedDate = $filter('date')(vm.date, 'shortTime');

  }


})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as MainCtrl">

  Formatted date in HTML template binding: {{MainCtrl.date | date: 'shortTime'}}
  
  <br>
  
  Formatted date from controller: {{MainCtrl.formattedDate}}

</div>

【讨论】：

我添加了我的数据和正在处理数据的 html 的屏幕截图。