angular - How to change output format of material 2 date-picker

Question

I am using angular material 2 Date-Picker component

The only string input it understands is in ISO date format

Ex. "2017-11-13T10:39:28.300Z"

But i want to patch my form control with locale date value

Ex. "11/13/2017, 4:09:46 PM"

So that it output the later format and even expects this format.

How can i do this? Is there a way to not use ISO but custom formats?

Some Thoughts:

Should i write customDateAdaptor?

Update:

https://stackblitz.com/edit/angular-material-moment-adapter-example-bqvm2f

i have tried to implement custom dateAdaptor by extending nativeDateAdaptor

Answer 1

The best solution would be to use ControlValueAccessor and make a custom input component, this will have you in control of input and output of the component.

update:

Here is the reference implementation using this approach reproduced by Moutaz-homsi

https://stackblitz.com/edit/angular-dlxnmx?file=app%2Fcva-date.component.ts