Using date pipe on input field – Angular 2

Question

It's easy enough to interpalate a date with the date pipe: {{someDate | date}}

But is there an easy way do the same on an input field. Let's say I'm wanting to edit a user's birthdate, so I go to an edit form. The birthdate field says "1986-04-22T22:06:28.912Z" (the actual value returned from the database), rather than "Apr 22, 1986".

I can do things inside the component logic to get it to display how I'd like, but is there a way to use the date pipe on the value of an input?

Answer 1

I've been able to use the angular2-text-mask and text-mask-addons as a way to transform the format of input text field values. The documentation and related info is quite thorough and a date example can be seen on a text-mask demo page.

This ngconsultant blog post discusses a technique for adjusting input values using a somewhat limiting (browser-native focus/blur methods) @HostListener technique.

Keep in mind that if you are only interested in transforming the date for user UI convenience, you'll have to write additional code to revert the date to the prior format before storing or utilizing it, otherwise your data model will maintain the fancy formatted version rather than the original format.

(There is a very similar question answered regarding currency and a very basic solution is discussed in this stackoverflow post.)