CODEWITHSUNDEEP
angularangular-material2
Epicity
Epicity

Reputation: 81

Cannot find name "MAT_DATE_LOCALE" with Material.angular Datepicker

According to the documentation https://material.angular.io/components/datepicker/overview here to set the locale code to one you want you provide it by putting 

providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
]

But then my app won't compile as it tells me it cannot find the name MAT_DATE_LOCALE. Am I missing something here as in I have to define it myself? Though, I can't think of where to put it as it's all in the module class.

Upvotes: 8

Views: 23983

Answers (6)

Renan
Renan

Reputation: 13

make sure you are changing the correct file.

src\app\material\material.module.ts

import {MAT_DATE_LOCALE} from '@angular/material/core';
...
@NgModule({
  providers: [
{provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
 ],

Upvotes: 0

Dicekey
Dicekey

Reputation: 405

When you upgrade your project dependancies from old version to new version some modules are moved into different namespaces, so you need to manually change them

i am using angular 9.1.2

I've used this

import { MAT_DATE_LOCALE } from '@angular/material/core';

instead of 

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

Upvotes: 6

Joan Sanchez
Joan Sanchez

Reputation: 331

In Angular 9 do the import:

 { MAT_DATE_LOCALE } from '@angular/material/core';

I suppose that in the import must be entered specified path import. Optimization stuff.

Sorry for my english.

From Angular 9, no component can be imported through @angular/material. You are to use the individual secondary entry-points, such as @angular/material/button.

Top New Features of Angular 9

Upvotes: 17

Nocturnal
Nocturnal

Reputation: 2037

To use MAT_DATE_LOCALE, it has to be imported explicitly like below

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

Please note that MAT_DATE_LOCALE should not be added to imports: [ ] array.

Upvotes: 12

Rafael Moura
Rafael Moura

Reputation: 1327

In my case I imported this

import { MatInputModule, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material';
import { MatDatepickerModule } from '@angular/material/datepicker';

and in my material.module.ts I do

imports: [
  ....
  MatDatepickerModule,
  MatNativeDateModule
],
exports: [
   ...
   MatDatepickerModule,
   MatNativeDateModule
],
providers: [
   {provide: MAT_DATE_LOCALE, useValue: 'pt-BR'},
],

in this whay its work

Upvotes: 3

Jehonadab Okpukoro
Jehonadab Okpukoro

Reputation: 11

Had similiar issues, this is what you'll do. import {MatNativeDateModule} from '@angular/material the on your @ngModule({ import: [MatNativeDateModule] }) this should work.

Upvotes: -1

Related Questions