How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way?

Question

I'm setting up a mat-datepicker for DOB and traditionally the display format is MM/DD/YYYY,I need to change it to DD/MM/YYYY with less coding

I tried format tag in mat-date picker but it does not work,other date pickers like ngbDatepicker format can easily changed through one line of coding

  <div class="col-md-3 Dinline-block">
     <mat-form-field>
        <input matInput [matDatepicker]="picker2" [max]="currentDate" 
         placeholder="DOB(DD/MM/YYYY)" required formControlName="dob" 
          readonly />
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker- 
         toggle>
        <mat-datepicker #picker2></mat-datepicker>
     </mat-form-field>
  </div>

The date displayed after selecting from mat-date picker should be DD-MM-YYYY and when the retrieving the value from date picker it should also be in DD-MM-YYYY format

Answer 1

First, bind the format to your mat-datepicker.

export const MY_FORMATS = {
    parse: {
        dateInput: 'LL'
    },
    display: {
        dateInput: 'YYYY-MM-DD',
        monthYearLabel: 'YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'YYYY'
    }
};

along with this you need to import and provide the modules.

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }

And in HTML follow this simply.

<mat-form-field>
    <input
        matInput
        [matDatepicker]="dp"
        placeholder="Verbose datepicker
        [formControl]="date"
    >
    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
    <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

Answer 2

use dateadapter from core

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

constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('en-GB'); //dd/MM/yyyy

}

`

Answer 3

I got it working after combining some knowledge from various answers here, so I thought I'd consolidate what worked for me.

Angular 10:

In your module, import MAT_DATE_LOCALE and add it to providers:

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

@NgModule({
  declarations: [...],
  imports: [...],
  exports: [...],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ]
})

If you use a shared module to import material this will change all the formats of your datepickers across the site.

Answer 4

Try this in the component you are using mat-datepicker

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

constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('your locale'); 
}

Answer 5

Full Guide on how to display and also parse the date on a custom format

1. Install "@angular/material-moment-adapter" the version of you angular
   npm i @angular/material-moment-adapter@[your_angular_version] find the version

2. Install "moment"
   npm i moment

3. Create a configuration on how you want the date to be displayed and parsed.

const MY_DATE_FORMAT = {
  parse: {
    dateInput: 'DD/MM/YYYY', // this is how your date will be parsed from Input
  },
  display: {
    dateInput: 'DD/MM/YYYY', // this is how your date will get displayed on the Input
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

4. Import these modules

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

5. Provide the new configuration

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }

This answered is inspired by this anwer

Answer 6

For me, the best approach was to inject MAT_DATE_FORMATS to my component, which then dynamically determines what should the display format look like.

Setup in component:

  constructor(@Inject(MAT_DATE_FORMATS) private dateFormats) { }

  ngOnInit() {
    if (this.data.inputType === InputDateDialogRangeType.MonthAndYearOnly)
      this.dateFormats.display.dateInput = "MMMM YYYY";
    else if (this.data.inputType === InputDateDialogRangeType.YearOnly)
      this.dateFormats.display.dateInput = "YYYY";           
  }

Setup in module:

 providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },

export const MY_DATE_FORMAT = {
  display: {
    dateInput: 'DD MMM YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

Answer 7

If you want to change the MaterialDatePicker date format into yyyy-mm-dd then use the below code. This code is working for me.

MaterialDatePicker<Long> materialDatePicker=materialDateBuilder.build();
materialDatePicker.addOnPositiveButtonClickListener(new MaterialPickerOnPositiveButtonClickListener<Long>() {
    @Override
    public void onPositiveButtonClick(Long selection) {
        // Get the offset from our timezone and UTC.
        TimeZone timeZoneUTC = TimeZone.getDefault();
        // It will be negative, so that's the -1
        int offsetFromUTC = timeZoneUTC.getOffset(new Date().getTime()) * -1;
        // Create a date format, then a date object with our offset
        SimpleDateFormat simpleFormat = new SimpleDateFormat("yyyy-MM-dd", Locale.US);
        Date date = new Date(selection + offsetFromUTC);

        mEt_last_date_to_apply.setText(simpleFormat.format(date));
    }
});

mEt_last_date_to_apply is my EditText

Answer 8

Angular 12 tested.

In the below chunk of code you can see how you can inject the datepipe into the constructor and then you can use it to convert date format in date controls. The best thing about this solution is that you are free to form the date as you wish regardless of any locale restrictions:

import { DatePipe } from '@angular/common';

export class SomeComponent {

myDatepipe!: any;

constructor(private fb: FormBuilder, datepipe: DatePipe)
{
     this.myDatepipe = datepipe;
     this.someForm = this.fb.group({
         someDateControl : new FormControl()
         }); 
    
}

SomeAction()
{
 if(this.someForm.value.someDateControl)
    {
         const ConvertedDate = this.myDatepipe.transform(this.someForm.value.someDateControl, 'yyyy-MM-dd');
    }
}


}

Answer 9

add to the providers list:

{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},