title: Angular 2 datetime formatting causing incorrect time to appear
body: <p>So I'm returning some date times from a database in my Ionic application. 
  The data coming back is correct, however when I use Angular's recommended way of formatting datetimes, the time changes to something incorrect. </p>
  
  <p>All I want to do is take my date time and simply display the time, leaving out the day of the day/month/year. </p>
  
  <p><strong>For example:</strong> </p>
  
  <p>The time I'm getting back is this <code>2017-03-19T08:00:00</code></p>
  
  <p>When I use <code>shortTime</code> to only return the time however, this is what is displayed in my browser <code>2:00 AM</code>. </p>
  
  <p><strong>Question: What is causing this time format discrepancy to happen and what can I do to resolve the issue?</strong></p>
  
  <p><strong>Edit: Here's a screenshot of the data i'm returning and the front end html</strong>
  <a href="https://i.stack.imgur.com/MDFD5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MDFD5.png" alt="enter image description here"></a></p>
  
  <p>home.html</p>
  
  <pre><code>&lt;ion-item text-wrap *ngFor="let item of dateEvent"&gt;
      &lt;p&gt;&lt;b&gt;Event Start:&lt;/b&gt; {{item.EventStart | date:'shortTime'}}&lt;/p&gt;
      &lt;p&gt;&lt;b&gt;Event End:&lt;/b&gt; {{item.EventEnd | date:'shortTime'}}&lt;/p&gt;
      &lt;/ion-item&gt;
    &lt;/ion-item&gt;
    &lt;ion-item *ngIf="!hasEvent" text-wrap&gt;
      &lt;p &gt;Looks like you don't have any events on {{dateTime | date: 'MM/dd/YYYY'}}!&lt;/p&gt;
    &lt;/ion-item&gt;
    &lt;h6 text-center="true"&gt;&lt;b&gt;NEXT EVENT:&lt;/b&gt;&lt;/h6&gt;
    &lt;ion-item *ngIf="hasNextEvent"&gt;
    &lt;ion-item text-wrap *ngFor="let item of nextEvent"&gt;
      &lt;p&gt;&lt;b&gt;Date:&lt;/b&gt; {{item.EventStart | date:'MM/dd'}}&lt;/p&gt;
      &lt;p&gt;&lt;b&gt;Event Start:&lt;/b&gt; {{item.EventStart | date:'shortTime'}}&lt;/p&gt;
      &lt;p&gt;&lt;b&gt;Event End:&lt;/b&gt; {{item.EventEnd | date:'shortTime'}}&lt;/p&gt;
      &lt;/ion-item&gt;
    &lt;/ion-item&gt;
    &lt;ion-item *ngIf="!hasNextEvent" text-wrap&gt;
        &lt;p &gt;Looks like you don't have any future events scheduled!&lt;/p&gt;
      &lt;/ion-item&gt;
  &lt;/ion-content&gt;
  </code></pre>