angular - 在输入字段上使用日期管道 – Angular 2

Question

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

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

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

Answer 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 中讨论了一个非常基本的解决方案。)