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

Question

将日期与日期管道进行隔离非常容易：{{someDate | date}}

但在输入字段上是否有一种简单的方法可以做同样的事情。让我们说我想编辑用户的生日，所以我去编辑表格。生日期说＆＃34; 1986-04-22T22：06：28.912Z＆＃34; （从数据库返回的实际值），而不是＆＃34; 1986年4月22日＆＃34;。

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

Answer 1

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

    import {Pipe, PipeTransform} from '@angular/core'; 

    @Pipe({ 
        name: "dateFromString"
    })
    export class DateFromStringPipe implements PipeTransform {
        transform(dateString){

            //logic goes here to convert date string to readable format
            let readableDate = ...

            return readableDate;
        }
    }

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

unreadableDateString | customDatePipe | date

Answer 2

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

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

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

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