Components: Add documentation for MomentDateAdapter usage

[emreavsar]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

There should be at least a small guide (preferably official docs) about how to use the newly (in beta 11) introduced MomentDateAdapter for the datepicker.

What is the current behavior?

No docs at all.

What are the steps to reproduce?

1. Check release notes of beta 11 and be happy about these words:
   > datepicker: Add Moment.js adapter (#6860) (9545427)
2. Go to official docs, and find nothing about how to introduce the moment adapter.

What is the use-case or motivation for changing an existing behavior?

Every feature should be documented.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Beta 11

Is there anything else we should know?

NO

[djleonskennedy]

@emreavsar You just need extend "DateAdapter" class

date-adapter.ts

and provide it

how to provide

For example; we don't use moment.js cause it not good for 2017, we've using date-fns and there was no problem to set adapter for it

[emreavsar]

I don't understand why then there is this extra information of adding the moment.js adapter to datepicker in release notes? I could have done this (custom adapter by extending) before beta 11, am I wrong with this assumption?

[rkrzewski]

To use the adapter, you need to import MatMomentDateModule into your app module and you are good to go. You can use moment.Moment objects as ngModel for the date picker.

The problem that @angular/material-moment-adapter module has not been published to https://npmjs.com yet. I worked around that by ripping out the sources from https://github.com/angular/material2/tree/master/src/material-moment-adapter/adapter and pasting them into a folder in my app's source tree. Works well enough for now, but I'd love to switch to a published version.

[Yeradon]

@rkrzewski You can use the builds repo: https://github.com/angular/material2-moment-adapter-builds. Just use npm install https://github.com/angular/material2-moment-adapter-builds --save

[rkrzewski]

That worked like a charm @Yeradon, thanks!

[yonatancohen]

Any example for using this?

[kwalski]

+1 an example please

[Yeradon]

@yonatancohen @kwalski https://stackblitz.com/edit/angular-material-moment-adapter-example

[mmalerba]

The last 2 examples here are for moment adapter: https://material.angular.io/components/datepicker/examples

[ankitraonka]

@mmalerba is there a way to change the output from iso fromat to some custom format. I dont want datepicker to work with time zones as the service crops the time part and hence when that time is given back to server we get wrong dates based on timezones

[mohitvashishtha]

UPDATE: It is available on npm use following command to install it:

npm i @angular/material-moment-adapter

[Moutaz-homsi]

@ankitraonka
i have the same issue , do you found any solution for this ?

[ankitraonka]

@Moutaz-homsi 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.

[Moutaz-homsi]

@ankitraonka, that's solve my problem for this issue , Have a great day and thanks a lot

[kamok]

Full process for using Moment objects instead of Date objects.

1. npm i @angular/material-moment-adapter --save
2. npm i moment --save
3. Provide in your ngModule. import { MatMomentDateModule } from '@angular/material-moment-adapter';.
4. Your Datepickers will now automatically emit Moment objects

[ankitraonka]

@Moutaz-homsi
https://stackoverflow.com/questions/47262449/how-to-change-output-format-of-material-2-date-picker

[Moutaz-homsi]

Thanks a lot @ankitraonka , this solved my issue , i repreduced the code here if anyone have the same problem : https://stackblitz.com/edit/angular-dlxnmx?file=app%2Fcva-date.component.ts

[starquake]

The DatePicker seems to be using Moment as dates just fine. But I have a model that has a Date as a property. I changed the type from Date to Moment but when my service retrieves data from the server the property of the model is just a string:
"2018-03-31T00:00:00"

Why is this not a Moment object? Am I missing something?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}