Angular12-new Date()与DatePipe时间管道

---

前言

NGZORRO的DatePicker组件输入输出仅支持Date，填入’yyyy-MM-dd HH:mm:ss’格式的值报错；输出时要把Date转为’yyyy-MM-dd HH:mm:ss’格式。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、DatePipe作用

DatePipe：根据本地环境中的规则格式化日期值。
（Angular官网https://angular.cn/guide/pipes-overview）
（Angular官网https://angular.cn/api/common/DatePipe）

二、使用步骤

1.引入库

代码如下（示例）：

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

（记得在Component引用DatePipe）

@Component({
  selector: 'app-rule',
  templateUrl: './rule.component.html',
  styleUrls: ['./rule.component.less'],
  providers: [DatePipe]
})

2.使用方法

输入值

参数	类型
value	string number or Date

参数

参数	类型	说明
format	string	可选值。默认值为 ‘mediumDate’。
timezone	string	可选值。默认值为 undefined。
locale	string	可选值。默认值为 undefined。

需求

某表格存在时间字段，支持编辑，点击编辑时需要把原数据（yyyy-MM-dd HH:mm:ss 格式）填充后重新选择，再传递（传递时也需要yyyy-MM-dd HH:mm:ss格式）。
1.把字符串形如‘yyyy-MM-dd HH:mm:ss’填充到NGZORRO的DatePicker组件中。即将字符串格式转为Date
2.把Date转为字符串形如‘yyyy-MM-dd HH:mm:ss’进行传参。

实现

1. 把使用new Date()把字符串转为Date

    this.time = new Date('2022-09-22 16:55:58');

---

2. 把使用new Date()把字符串转为Date

     let pipeTime = this.datePipe.transform(this.time,'yyyy-MM-dd HH:mm:ss')

---

总结

date与DatePipe的简单使用。