CODEWITHSUNDEEP
angularangular-material
Shauly Yonay
Shauly Yonay

Reputation: 59

Angular Material date picker input treat the date as US format

When populating the date in the input field (not via the datepicker itself) date is treated as US format. For example, after typing in input field - 10/01/2019 it becomes 01/10/2019 and when opening the date picker the date is first of October 2019.

when selecting the date via the date picker there is no issue and selected date is displayed as dd/MM/yyyy

Upvotes: 3

Views: 4335

Answers (3)

Khalil.Stab
Khalil.Stab

Reputation: 31

A fix that worked for me was to import the module MatMomentDateModule in the module where I have declared the component using the Material Datepicker.

Or of course you can add it in the imports/exports of your shared module so it can be imported in any other module.

FYI : In Angular Material Docs, I found this in an example of a Datepicker with locale :

/** @title Datepicker with different locale */
@Component({
  selector: 'datepicker-locale-example',
  templateUrl: 'datepicker-locale-example.html',
  styleUrls: ['datepicker-locale-example.css'],
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.
    {provide: MAT_DATE_LOCALE, useValue: 'ja-JP'},
    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
    },
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
})
export class DatepickerLocaleExample implements OnInit {

As you can see in the last comment, they recommend importing MatMomentDateModule at root module level, but it did not work for me.

Last but not least, it worked with and without the proposed solution by Eliseo.

EDIT : Found the root cause which is the MatNativeDateModule being imported in my shared module. This made the DateAdapter instance not being a singleton one. Moving it to the root module with MatMomentDateModule fixed the issue. Here's my root module :

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes, {
      useHash: false,
    }),
    KeycloakAngularModule,
    SharedModule,
    MatMomentDateModule,
    MatNativeDateModule,
  ],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
    },
    { provide: MAT_DATE_LOCALE, useValue: "fr-FR" },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
    { provide: LOCALE_ID, useValue: "fr" },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Upvotes: 1

Eliseo
Eliseo

Reputation: 57929

UPDATE There was a "bug" in format function -need a parenthesis in ('0'+(date.getMonth()+1)).slice(-2)-

just create a DateAdapter

import {NativeDateAdapter,DateAdapter} from '@angular/material';

export class MyDateAdapter extends NativeDateAdapter{
  parse(value: string) {
    let it=value.split('/');
    if (it.length==3)
    return new Date(+it[2],+it[1]-1,+it[0],12)
  }

  format(date: Date, displayFormat: Object) {
    return ('0'+date.getDate()).slice(-2)+'/'+
           ('0'+(date.getMonth()+1)).slice(-2)+'/'+date.getFullYear()
  }
}

Then use as provider

@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
    providers: [
    {provide: DateAdapter, useClass: MyDateAdapter}
  ],

})
export class DatepickerFormatsExample {
  date = new FormControl(new Date(Date.now()));
}

see in

stackblitz

Upvotes: 14

HMarteau
HMarteau

Reputation: 654

If you are using the angular material datepicker you can overide the locale wich is US by default. see this link : https://material.angular.io/components/datepicker/overview#internationalization

You need to set the useValue to fr-FR or other locale that uses the dd/MM/yyyy

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'fr-FR'},
  ],
})
export class MyApp {}

Upvotes: -1

Related Questions