如何在Angular 5组件中格式化日期

Question

我刚接触Angular，并希望在组件的ngOnInit方法中对日期进行格式化。我看到一些示例使用管道运算符来格式化数据，但我不知道如何在组件文件中格式化日期。

以下是代码：

export class DashboardComponent implements OnInit {
  formatdate = 'dd/MM/yyyy';
  constructor(private auth: AuthService) { }

  ngOnInit() {
    console.log(new Date().toISOString())
  }


}

- Feroz Siddiqui

---

可能是JavaScript中将日期格式化为MM/dd/yyyy的重复问题。 - Aravind

Typescript是JavaScript的超集，这个解决方案也可以工作。 - Aravind

你的意思是我可以使用 JavaScript 的相同逻辑并在这里使用它。这是一种标准的做法吗？还是 TypeScript 会有内置的处理方式来处理这个问题？ - Feroz Siddiqui

是的，您可以使用相同的逻辑来实现这一点。 - Aravind

JavaScript存在问题，它太开放和松散了。正因为如此，我使用TypeScript来进行限制。我不想使用JavaScript。 - Feroz Siddiqui

Answer 1

同样还有formatDate

const format = 'dd/MM/yyyy';
const myDate = '2019-06-29';
const locale = 'en-US';
const formattedDate = formatDate(myDate, format, locale);

根据API，它可以接受日期字符串、日期对象或时间戳作为参数。

注意：默认只支持en-US。

如果需要添加其他区域设置，您需要将其添加并在app.module中注册，例如对于西班牙语：

import { registerLocaleData } from '@angular/common';
import localeES from "@angular/common/locales/es";
registerLocaleData(localeES, "es");

不要忘记添加相应的导入：

import { formatDate } from "@angular/common";

- Nidhal Ben Tahar

---

谢谢，这对我有用，一开始它报错了，加上本地模块后就可以工作了！ - Mark

Answer 2

您可以在此处找到关于日期管道的更多信息，例如格式。

如果您想在组件中使用它，只需执行以下操作

pipe = new DatePipe('en-US'); // Use your own locale

现在，您可以简单地使用它的转换方法，这将是

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');

- user4676340

---

谢谢，伙计。你能告诉我在哪里可以找到 TypeScript 的教程吗？ - Feroz Siddiqui

在整个互联网上都可以找到相关信息，但我猜官方网站应该有最全面的资料。你还应该查看 Angular 网站，因为大部分问题都可以在那里得到解答（包括这个问题！）。 - user4676340

是的，但我在文档中找不到任何与日期/Map/Set相关的主题。 - Feroz Siddiqui

尝试使用.transform(yourDate, 'yyyyMMddhhmmss')或类似的东西。 - user4676340

如果您使用的语言环境不是 en-US，请不要忘记按照这里所述注册该语言环境。 - Daan

Answer 3

请参考下面的链接：

https://angular.io/api/common/DatePipe

从那里的使用示例

@Component({
 selector: 'date-pipe',
 template: `<div>
   <p>Today is {{today | date}}</p>
   <p>Or if you prefer, {{today | date:'fullDate'}}</p>
   <p>The time is {{today | date:'h:mm a z'}}</p>
 </div>`
})
// Get the current date and time as a date-time value.
export class DatePipeComponent {
  today: number = Date.now();
}

{{today | date:'MM/dd/yyyy'}} 输出：17/09/2019

或者

{{today | date:'shortDate'}} 输出：17/9/19

- Srinivasan N

Answer 4

另一种选择是使用内置的Angular formatDate 函数。我假设你正在使用响应式表单。这里的todoDate是模板中的日期输入字段。

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

this.todoForm.controls.todoDate.setValue(formatDate(this.todo.targetDate, 'yyyy-MM-dd', 'en-US'));

- Rathma