Angular 2 datetime Formatierung verursacht falsche Zeit zu erscheinen

Question

So gebe ich einige Datum Zeiten aus einer Datenbank in meiner Ionic-Anwendung. Die Daten, die zurückkommen, sind korrekt. Wenn ich jedoch die von Angular empfohlene Formatierung von Datumsangaben verwende, ändert sich die Zeit in etwas Falsches.

Alles, was ich tun möchte, ist, nehmen Sie meine Datum Zeit und zeigen Sie einfach die Zeit, ohne den Tag des Tages/Monat/Jahr.

Zum Beispiel:

Die Zeit, die ich bin immer wieder ist diese 2017-03-19T08:00:00

Als ich shortTime verwenden, um nur die Zeit jedoch zurückkehren, ist das, was in meinem Browser 2:00 AM angezeigt wird.

Frage: Was verursacht diese Zeitformatdiskrepanz und was kann ich tun, um das Problem zu lösen?

Edit: Hier ist ein Screenshot der Daten ich bin Rückkehr und das vordere Ende 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> 

Answer 1

Datum, das Sie sind in dem Objekt bekommen Sie zur Verfügung gestellt ist 2017-03-19T08:00:00 ein UTC-Datum, die 2:00 AM (Mountain Time) auf die gleich ist gleicher Tag. Sie müssen sich keine Sorgen machen. JavaScript konvertiert das Datum immer in die lokale Zeitzone, bevor es im Browser angezeigt wird. Wenn wir ein Datum eingeben, benötigt es die lokale Zeitzone und sendet es als UTC-Datum an den Server.

Ich habe gerade mit der gleichen Date Time versucht, die Sie bereitgestellt haben. Es zeigte mir Sun Mar 19 2017 13:30:00 GMT+0530 (India Standard Time).

Answer 2

Es scheint mit diesem Wert richtig zu funktionieren. Sind Sie sicher, dass Sie den richtigen Wert haben?

Heres ein Arbeitsbeispiel der Datumsfilter mit 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>