DeathGhost

Angular日期在TypeScript中格式化转换应用

这篇文章发布于 2019年07月25日 21:48 星期四 阅读 545 次,评论 0 条

DeathGhost 编辑,归类于angular »

组件模板中我们常常使用Angular内置管道DatePipe将其日期格式化,如同{{ startTime | date:'yyyy-MM-dd' }}这般操作,即可转换为字符串格式。那么在TS文件中我们也可以通过DatePipe或formatDate方法将其格式化。

在前端项目开发过程中往往会遇将日期格式化,转换为友好显示格式,如同将"Sat Jun 01 2019 23:21:55 GMT 0800"格式化为"yyyy-MM-dd"(年-月-日);Angular项目中我们常常使用其内置管道将其格式转换e.g. {{ startTime | date:"yyyy-MM-dd" }},以达到所要显示的格式;下面我们看看在TypeScript(.ts)中的方法应用。

Angular6.x之前一直使用DatePipe转换日期格式,在angular6.x 之后API中又发现formatDate方法,具体就不晓得了,我一直使用DatePipe。

Angular日期时间格式化
Angular日期时间格式化(DatePipe/formatDate)

DatePipe在.TS的应用

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

export class DemoComponent implements OnInit {   
constructor(private datePipe: DatePipe) {}
  formatDateFun(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

别忘记在当前模块中将其providers: [DatePipe]添加。

formatDate在.TS的应用

import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { formatDate } from '@angular/common';

export class DemoComponent implements OnInit {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  formatDateFun(date) {
    return formatDate(date, 'yyyy-MM-dd', this.locale);
  }
}

如上设置记得在项目根模块配置

import { NgModule, LOCALE_ID } from '@angular/core';
providers:[{provide: LOCALE_ID, useValue: 'zh-Hans' }]

又或者不设置,则在formatDate中直接使用'zh-Hans'(简体中文)即可,如:

formatDate(new Date(), 'yyyy-MM-dd', 'zh-Hans')

其语法结构如:

formatDate(value: string | number | Date, format: string, locale: string, timezone?)

value: 要格式化的日期,是一个日期、数字(从 UTC 时代以来的毫秒数)或 ISO 字符串;

format: 日期时间格式,使用预定义选项或自定义格式字符串(如:2019年07月25日...);

locale: 区域代码;

timezone: (选填) 时区; 

就到这里,上次在项目框架升级到Angular8.x版本时原 DatePipe 方法格式化地方报错,索性将其全更换为 formatDate 方法。

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。


孙志锋more,08年毕业于外事EC专业,从事5年服装B2C运营管理于杭;现,西安从事IT领域前端设计开发工作。
4

目录

32

文章

7

评论

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕