angular - Datepipe Angular 2 未显示正确的结果

Question

下面是我的代码。使用日期管道中的 Angular 2 将时间戳转换为正确的日期格式。

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template:`<h1>My First Angular 2 App</h1>
<p>{{test | date: 'dd/MM/yyyy'}} - format: dd/MM/yyyy</p>`
})

export class AppComponent { 
test : Date = '2017-04-30T23:59:59';
}

输出：01/05/2017 - 格式：dd/MM/yyyy

但我期待 2017 年 4 月 30 日作为我的输出

Answer 1

如果您只想显示日期，请使用此

<div>{{test.split("T")[0] | date : 'dd/MM/yyyy'}}</div>

Answer 2

我认为您遇到了时区问题。

来自https://www.w3schools.com/js/js_dates.asp：

设置日期时，不指定时区，JavaScript 将使用浏览器的时区。

获取日期时，不指定时区，结果将转换为浏览器的时区。

当我测试只是在 jsFiddle 的构造函数中使用您的字符串创建日期并控制台将其注销时，我得到的时间比我定义的时间晚 5 小时，这对应于 GMT。

尝试使用指定的时区设置日期：

test : Date = new Date('2017-04-30T23:59:59Z');

Answer 3

我的解决方案如下

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2><br>
      <h5>{{test | date: 'dd/MM/yyyy'}}</h5>
    </div>
  `,
})
export class App {
  name:string;
   test : Date = new Date('2017-04-30T23:59:59');
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
   console.log(this.test)
  }
}

现场演示

更新 ：

 getExcatDate(string){
    let year=new Date(this.name).getYear();
    let month=new Date(this.name).getMonth();
    let date=new Date(this.name).getDate();

    let local= (date.toString().length===1 ?  '0' +date : date) + '/' +
                (month.toString().length===1 ?  '0' +month : month) 
              + '/' +  year.toString().substring(1);
    console.log(local)
    return local;
  }

使用上述方法获取确切的日期，因为 Pankaj 说日期管道不适用于您的情况。演示已更新