如何在Angular 2中将日期转换为'yyyy-MM-dd'格式

Question

如何在Angular 2中将日期转换为'yyyy-MM-dd'格式

94

我想在 .ts 文件中将当前日期转换为 'yyyy-MM-dd' 格式。在模板中，可以通过使用日期管道轻松完成。如何在 TypeScript 中实现？

在模板中：

{{date  | date:'yyyy-MM-dd'}}

如何在typescript中将日期格式转换为'yyyy-MM-dd'?

我只是使用以下方法获取当前日期。

this.date =  new Date();

但我需要将其转换为给定的格式。

- Umar Rasheed

1

Angular 2中如何在服务中使用管道？ - Shil Nevado

1

可能是重复的问题，参考这个链接如何在Angular 2中使用管道将日期格式化为dd/MM/yyyy？ - Ivar Reukers

我尝试了两种方法，但都没有起作用。可能是由于Angular 2正式版中的一些更改。因为提到的重复项来自beta版本。 - Umar Rasheed

这个问题在@Shil链接的问题中已经得到了回答，请阅读第二个答案，该答案使用构造函数注入。那个答案中没有提到的一件事是，如果使用DI，需要将datepipe列在组件或服务的提供者中。 - silentsod

你使用的Angular版本是什么？我在rc.2版本中进行了测试，如我的回答中所引用的，以及当前版本的Angular 2.1.1(http://plnkr.co/edit/f7Wih8ceKHQUDHKmYCpQ?p=preview)，它的格式标准正常工作。这个问题已经在版本rc.2中得到解决[如我在这里所引用的](https://dev59.com/5lsV5IYBdhLWcg3w0hlU#37931071)。如果你的angular版本在rc.2之后，那么这应该可以工作，如果低于这个版本，你应该考虑其他替代方案[如此](https://dev59.com/5lsV5IYBdhLWcg3w0hlU#37859544)，或升级angular版本。 - Fernando Leal

我的版本是 Angular 2.0.0 正式版。 - Umar Rasheed

8个回答

26

我在我的项目中也遇到了同样的问题。感谢 @Umar Rashed，但我将详细解释一下。

首先，在 app.module 中提供 Date Pipe：

providers: [DatePipe]

将其导入到您的组件和 app.module 中：

import { DatePipe } from '@angular/common';

其次，在构造函数下声明：

constructor(
    public datepipe: DatePipe
  ) {

日期来自服务器并且会被解析成如下形式输出到控制台：

2000-09-19T00:00:00

使用以下代码将日期转换为所需格式; TypeScript：

this.datepipe.transform(this.birthDate, 'dd/MM/yyyy')

从HTML模板中展示：

{{ user.birthDate }}

并且它看起来是这样的:

19/09/2000

在网站上也可以看到这样的内容：筛选后显示的日期（点击查看截图）

- LuDeveloper

3

太棒了！这正是开发人员所需要的，不需要每天、每月或每年追加来创建自己的格式。干杯！伙计……谢谢。 - Amrish Kakadiya

18

你也可以使用 formatDate

let formattedDt = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ssZZZZZ', 'en_US')

- Abhishek Soni

在静态方法中运行良好。谢谢。 - RED-ONE

15

一个简单的解决方法就是写：

this.date = new Date().toLocaleDateString();

日期 .toLocaleDateString() 时间 .toLocaleTimeString() 日期和时间 .toLocaleString()

希望这可以帮到你。

- Ahmed Hamed

朋友，我可以完美地获取数据，例如：2018年8月30日（巴西的日期），但如果我只想获取日期、月份或仅年份，应该如何操作？ - Rafael Moura

你所寻找的答案已经在以下SO问题中得到了回答。 - Ahmed Hamed

9

你也可以尝试这个方法。

以今天的日期'2018年12月28日'为例。

 this.date = new Date().toISOString().slice(0,10);

new Date() 的输出结果为：Fri Dec 28 2018 11:44:33 GMT+0530 (印度标准时间)

使用 toISOString() 方法转换后的结果为：2018-12-28T06:15:27.479Z

使用 slice(0,10) 方法截取前十个字符，即包含年月日的 yyyy-mm-dd 格式日期为：2018-12-28。

- Viveka

1

请注意，ISO字符串将在GMT时区中，因此，根据您所在的时区，您的日期可能会偏差一天。 - mik01aj

这个答案是错误的。你完全忽略了时区。你试过 2018-12-31T23:55:00.000Z 吗？ - youhans

1

const formatDate=(dateObj)=>{
const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];

const dateOrdinal=(dom)=> {
    if (dom == 31 || dom == 21 || dom == 1) return dom + "st";
    else if (dom == 22 || dom == 2) return dom + "nd";
    else if (dom == 23 || dom == 3) return dom + "rd";
    else return dom + "th";
};
return dateOrdinal(dateObj.getDate())+', '+days[dateObj.getDay()]+' '+ months[dateObj.getMonth()]+', '+dateObj.getFullYear();
}
const ddate = new Date();
const result=formatDate(ddate)
document.getElementById("demo").innerHTML = result

<!DOCTYPE html>
<html>
<body>
<h2>Example:20th, Wednesday September, 2020 <h2>
<p id="demo"></p>
</body>
</html>

- SaimumIslam27

0

我建议你如果在使用Angular时遇到问题，可以看看Moment.js。这至少是一个快速解决方案，而不需要花费太多时间。

- chunhoong

当我使用moment时，出现了这个错误：无法调用命名空间('moment')。 - Umar Rasheed

0

只需使用：

today:string = new Date().toJSON().slice(0,10).replace(/-/g,'/');

- A.Casanova

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Umar Rasheed · Accepted Answer

使用Datepipe可以将 TypeScript 中的日期转换为这种格式'yyyy-MM-dd'

import { DatePipe } from '@angular/common'
...
constructor(public datepipe: DatePipe){}
...
myFunction(){
 this.date=new Date();
 let latest_date =this.datepipe.transform(this.date, 'yyyy-MM-dd');
}

只需在app.module.ts的'providers'数组中添加Datepipe即可。像这样:

import { DatePipe } from '@angular/common'
...
providers: [DatePipe]