[Angular Material: DatePicker] Set Custom Date in (DD-MM-YYYY) format

As working with Angular Material 8 DatePicker Component, i was not able to set the Date in a specific format. After spending 2 hours of researching, i achieved the Goal by following multiple articles. Later thought why don’t i make it easy for others, who might get into the same situation.

So here i am, Back with another problem solving magical thing, Here i was using Template-Driven Approach to build forms.

The HTML CODE

<mat-form-field>

The HELPER Function

This is the functionthat will translate the Date to DD-MM-YYYY format as the example, however you can customize it accordingly. I created a single file named “format-datepicker.ts” and written following code..

import { NativeDateAdapter } from ‘@angular/material’;
import { MatDateFormats } from ‘@angular/material/core’;

Provide this implementation inside the providers tag of Component Decorator by overriding the default,

import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core';
import { AppDateAdapter, APP_DATE_FORMATS } from 'src/app/shared/format-datepicker';

And Boom, You will see the result!

Leave a few claps, if this article helped you in any way :)

Developer? Trying to be One! Work: https://play.google.com/store/apps/developer?id=Amandeep+Kochhar