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

ONLINECAST

3 min read

·

06-10-2024

7

0

Share

Ditch the Default: Formatting Mat-Datepicker to DD/MM/YYYY in a Jiffy

The Angular Material Datepicker, mat-datepicker, is a powerful tool for adding date selection functionality to your Angular applications. However, you might find that the default date format (MM/DD/YYYY) doesn't align with your application's needs.

Let's say you're building a website for a UK-based company. In this case, the standard DD/MM/YYYY date format is essential for user-friendliness. Fear not, changing the date format is incredibly straightforward, and this guide will walk you through the simplest approach.

Understanding the Problem:

The default date format in mat-datepicker is based on the user's locale settings. This is usually set to MM/DD/YYYY in many regions. We want to override this default and force the output to be in DD/MM/YYYY format.

The Scenario:

Imagine you're creating a simple form that requires a user to enter their birth date. The form uses a mat-datepicker for date selection. By default, the date appears in MM/DD/YYYY format, which is not ideal for our UK-based user.

Original Code:

<mat-form-field>
  <mat-label>Enter your Birthday</mat-label>
  <input matInput [matDatepicker]="picker" placeholder="DD/MM/YYYY">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

The Solution:

The easiest way to change the date format is to use the dateAdapter provided by Angular Material. By overriding the format property of the DateAdapter, we can dictate how the date is displayed.

Modified Code:

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

// Define your custom date format
const MY_FORMATS: MatDateFormats = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  }
};

@Injectable()
export class CustomDateAdapter extends MomentDateAdapter {
  constructor(dateAdapterOptions: MAT_MOMENT_DATE_ADAPTER_OPTIONS) {
    super(dateAdapterOptions);
  }

  override format(date: Date, displayFormat: string): string {
    return super.format(date, displayFormat);
  }
}

@NgModule({
  imports: [
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  providers: [
    // Use the custom date adapter
    {provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_FORMATS]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
  declarations: [
    // ... your components
  ]
})
export class AppModule { }

Explanation:

1. Import necessary modules: Include MatDatepickerModule, MatNativeDateModule and MatMomentDateAdapter.
2. Define MY_FORMATS: This object specifies the custom date format for input and display.
3. Create custom date adapter: The CustomDateAdapter class extends the MomentDateAdapter to provide the desired date format.
4. Override format() method: This method ensures that the date is displayed using the defined format.
5. Provide custom date adapter: Register the CustomDateAdapter in the providers array of your module.
6. Provide MAT_DATE_FORMATS: This provides the custom date format object.

Additional Insights:

• The MatMomentDateAdapter is optional but recommended for improved performance and better date handling. You can use the standard DateAdapter if you prefer.
• You can further customize the date format by using Moment.js formatting options (e.g., DD-MM-YYYY or Do MMMM YYYY).
• This approach ensures consistency across your entire application, applying the desired format to all mat-datepicker instances.

Conclusion:

Changing the mat-datepicker date format to DD/MM/YYYY is a breeze with the DateAdapter and a little bit of configuration. This straightforward solution ensures your application delivers a user-friendly experience that aligns with regional expectations.

Resources:

• Angular Material Datepicker
• Moment.js Documentation