How can I change date format in angular material datepicker?

Question

I want to change the default date format (YYYY-MM-DD) to some other format like (MM-DD-YYYY).

This is my calendar HTML structure.

 <mat-form-field class="full-width">
                        <input matInput [matDatepicker]="picker"
                               [(ngModel)]="currentDay"
                               (dateChange)="currentDayChanged()"
                               required
                               placeholder="date"
                               name="currentDay">
                        <mat-datepicker-toggle matSuffix
                                               [for]="picker">
                        </mat-datepicker-toggle>
                        <mat-datepicker #picker></mat-datepicker>
                    </mat-form-field>

where you want to change the date? in view or in .tsduring sending the date in api. if you want to change the date in view then you can follow #pardeep answer and if you want to change in .ts file then follow this — Farhat Zaman
– Farhat Zaman, Commented Feb 13, 2019 at 11:58
@FarhatZaman I just want to change in view. But it is not working. I'm working with the moment.js in .ts file. — miladhp
– miladhp, Commented Feb 13, 2019 at 12:02
please share your .ts code as well and let us know what you have tried yet. and create a reproducible example in stackblitz, if possible. — Farhat Zaman
– Farhat Zaman, Commented Feb 13, 2019 at 12:09
Use a pipe where you are displaying date in html {{ element.createdDate | date: 'dd-MM-yyyy' }} — Cpt Kitkat
– Cpt Kitkat, Commented Feb 14, 2019 at 12:37

Neto Deolino · Accepted Answer · 2019-02-13 12:32:58Z

4

Set in AppModule your locale!

Example for Brazil,

import { LOCALE_ID } from '@angular/core';

import localePt from '@angular/common/locales/pt';
registerLocaleData(localePt, 'pt-BR');

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [],
    providers: [
      { provide: LOCALE_ID, useValue: 'pt-BR' }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

answered Feb 13, 2019 at 12:32

Neto Deolino

771 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

miladhp Over a year ago

I have implemented it and it works properly, but I have a problem. I want to get user date-format from one of the method in my Authentication service, How I should implement it dynamically?

Eric Valero Over a year ago

It works but I want to keep month names in english 'en-EN' and the date format is 'MM-DD-YYYY'

Bert Verhees · Accepted Answer · 2019-02-13 12:05:08Z

3

There is a blog about it: https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

(in case the URL becomes invalid), For example, say you’re already using Moment.js throughout your app, you can create a MomentDateAdapter:

Inherit a class

class MomentDateAdapter extends DateAdapter<Moment> {
  parse(value: any, parseFormat: any): Moment {
    return moment(value, parseFormat);
  }

  // Implementation for remaining abstract methods of DateAdapter.
}

Create a const like this, f.e. in a separate typescript file:

const MOMENT_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    monthYearLabel: 'MMM YYYY',
    // See DateFormats for other required formats.
  },
};

finally provide both of these things in your application module

@NgModule({
  imports: [MdDatepickerModule, ...],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MOMENT_FORMATS},
  ],
})
class AppModule {}

I appreciate if you let us know your results.

answered Feb 13, 2019 at 12:05

Bert Verhees

1,0833 gold badges14 silver badges25 bronze badges

2 Comments

miladhp Over a year ago

I have implemented it and it works properly, but I have a problem. I want to get user date-format from one of the method in my Authentication service, How I should implement it dynamically?

Bert Verhees Over a year ago

I don't know the use case, but assume it is having an unknown number of dates, I would consider an array.

Collectives™ on Stack Overflow

How can I change date format in angular material datepicker?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related