Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I change date format in angular material datepicker?

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>
like image 785
miladhp Avatar asked Mar 05 '23 12:03

miladhp


1 Answers

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 { }
like image 95
Neto Deolino Avatar answered Mar 15 '23 05:03

Neto Deolino