15

Following Material docs, I:

import {MdDatepickerModule} from '@angular/material';

in root module and added it in providers list, but coudln't use it in template. Got this error:

Uncaught (in promise): Error: MdDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MdNativeDateModule, or provide a custom implementation.

So according to it, I removed last import and added:

import {MdNativeDateModule} from '@angular/material';

And now, looks like, it works. Why Material docs tells to import MdDatepickerModule, but not MdNativeDateModule? And how they differ?

2 Answers 2

22

The example in the docs actually does import MdNativeDateModule. Click on the plunker link and see the main.ts file. The docs are not as clear about this as would be preferred.

MdDatepickerModule is the module containing the component itself. The component is agnostic to which implementation of dates you use with it.

For example, if you wished to use Moment.JS dates instead of JavaScript's native Date objects, you could write your own class to work with Moment.JS objects. This is explained here.

If you simply want to work with JavaScript's Date objects, though, you would need to use the NativeDateAdapter class that is already included in @angular/material. This class is provided by the MdNativeDateModule.

It is not provided by MdDatepickerModule since that module deals only with the UI component, and in case you were using Moment.JS objects, you would have no need for the NativeDateAdapter class in your application.

5
  • 8
    for update the module name is now - "MatNativeDateModule" Commented Oct 28, 2017 at 11:56
  • whats the difference between MatNativeDateModule and MatMomentDateModule?
    – Maurice
    Commented May 21, 2018 at 16:35
  • 1
    @Maurice they're for working with JS' native Date objects and Moment.js objects repectively Commented May 21, 2018 at 16:37
  • @AakashJain seems the MatMomentDateModule isnt available out-of-the-box, do you need to install Moment.js first?
    – galki
    Commented Nov 29, 2018 at 16:54
  • 1
    @galki check here for how to import the module. You will need moment.js in your project as well. Commented Nov 30, 2018 at 9:56
6

you need to import MatNativeDateModule from @angular/material once you imported, you should have to import and export it in @NgModule you can see on angular material

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.