在输入字段上使用日期管道 – Angular 2答案

【问题标题】：Using date pipe on input field – Angular 2在输入字段上使用日期管道 – Angular 2
【发布时间】：2016-06-28 21:26:33
【问题描述】：

用日期管道插入日期很容易：{{someDate | date}}

但是有没有简单的方法在输入字段上做同样的事情。假设我想编辑用户的生日，所以我去编辑表单。生日字段显示“1986-04-22T22:06:28.912Z”（从数据库返回的实际值），而不是“1986 年 4 月 22 日”。

我可以在组件逻辑中做一些事情来让它显示我想要的方式，但是有没有办法在输入值上使用日期管道？

【问题讨论】：

标签： angular

【解决方案1】：

我已经能够使用angular2-text-mask 和text-mask-addons 来转换输入文本字段值的格式。文档和相关信息非常详尽，可以在text-mask demo page 上查看日期示例。

This ngconsultant blog post 讨论了一种使用某种限制（浏览器原生焦点/模糊方法）@HostListener 技术调整输入值的技术。

请记住，如果您只对转换日期以方便用户 UI 感兴趣，则必须在存储或使用日期之前编写额外的代码将日期恢复为以前的格式，否则您的数据模型将保持花哨的格式版本，而不是原始格式。

（关于货币有a very similar question answered，this stackoverflow post 讨论了一个非常基本的解决方案。）

【讨论】：

【解决方案2】：

没有办法将字符串传递到默认的角度日期管道，但您可以创建一个自定义管道来完成这项工作。这将允许您将转换逻辑排除在组件之外，并为您提供可插入任何模板的可重用代码。

从“@angular/core”导入 {Pipe, PipeTransform}； @管道（{ 名称：“日期从字符串” }) 导出类 DateFromStringPipe 实现 PipeTransform { 转换（日期字符串）{ //逻辑在这里将日期字符串转换为可读格式让可读日期 = ... 返回可读日期； } }

如果您不想处理生成可读的日期字符串，另一种选择是让您的自定义管道返回一个日期对象，然后您可以将该管道链接到角度日期管道中。在您的模板中

unreadableDateString | customDatePipe | date

【讨论】：