美文网首页
利用Angular Pipe实现时间格式化

利用Angular Pipe实现时间格式化

作者: 工程师INNOV | 来源:发表于2019-06-17 19:27 被阅读0次

Typescript和Javascript的Date对象非常灵活,可以输出一些不同类型的格式化字串显示。

例如:

console.log(new Date('2019-01-01').toString()) //输出为 Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)

console.log(new Date('2019-01-01').d.toLocaleDateString())  //输出为 2019/1/1

然而,Date对象没有完整的格式化输出能力。例如,上文原生方法,无法输出"2019-01-01"

因此开发者往往需要自行实现Date的格式化输出。

******

Angular的DatePipe实现了非常方便的时间格式化显示,在html页面中可以直接显示不同格式的时间。语法形式为 date_expression | date[:format[:timezone[:locale]]]

例如 {{today | date:'yyyy-MM-dd'}}

参考文档只介绍了如何在html中打印输出,我们可以更进一步。

利用DatePipe实现Date对象转化为格式化字串。具体做法

1、在*.module.ts中引入Datepipe

     providers: [DatePipe],

2、在*.component.ts中使用。

constructor(public datepipe:DatePipe) {}

……

let s = this.datepipe.transform(new Date('2019-01-01'),'yyyy-MM-dd');

console.log(s)  //输出为 2019-01-01

参考

DatePipe

相关文章

  • 利用Angular Pipe实现时间格式化

    Typescript和Javascript的Date对象非常灵活,可以输出一些不同类型的格式化字串显示。 例如: ...

  • Angular component 组件内使用原生pipe

    Angular内置的pipe一般用在template中,比如下面的CurrencyPipe用来格式化货币 A: {...

  • Angular Pipe

    Angular Pipe is object, not function, when pipe created, ...

  • Angular2中Pipe的用法

    Pipe的作用 都是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。 Angular2的内建管道和分类...

  • Angular—pipe

    什么是pipe 中文释义“管道”。 把数据作为输入,然后转换它,给出期望的输出。例如,将UTC时间转为指定格式;中...

  • 44. goroutine、channel、time的例子

    格式化时间样式,利用 goroutine 实现获取和格式化当前时间,并且通过 channel 返回到主函数并打印出...

  • io之pipe

    io包中通过pipe实现了管道 源码 总结 pipe最核心还是通过channel来进行通信,利用无缓冲channe...

  • Angular自定义pipe实现

    angular尽管内置许多的pipe,比如date、async、currency等。尽管拿来即用,但是远不能满足于...

  • Angular4-lazyload懒加载

    在Angular4中实现懒加载html、js、css等资源。利用Angular CLI实现懒加载,通过loadCh...

  • Angular 关于pipe

    Angular 中的管道其实就是angularjs中的过滤器,用来转换数据然后显示给用户。要创建一个管道,必须实现...

网友评论

      本文标题:利用Angular Pipe实现时间格式化

      本文链接:https://www.haomeiwen.com/subject/fevzfctx.html