dd/MM/YYYY is the most used date format in the websites.
Angular Date Pipe used to format the dates according to our needs.
Steps to format date as dd/MM/YYYY in Angular using date pipe.
- Declare the date variable in the component ts file.
- In the template HTML file, convert the date using date pipe by passing format argument to it.
{{dateddmmyyyy | date: 'dd/MM/YYYY' }}</h3>
The problem with the above approach is, we will display the date in multiple places in our websites.
And every time we have to pass the format argument to the DatePipe, wherever its required.
To avoid this we can create our own custom DatePipe which displays the date in ‘dd/MM/YYYY’ format.
Create Custom date pipe with dd/MM/YYYY format.
Go to your Angular application root directory and create a custom pipe using ng generate pipe command.
And give some meaning full name to the pipe,to understand it’s purpose.
>ng generate pipe dd-mm-YYYY-date
CREATE src/app/dd-mm-yyyy-date.pipe.spec.ts (214 bytes)
CREATE src/app/dd-mm-yyyy-date.pipe.ts (229 bytes)
UPDATE src/app/app.module.ts (952 bytes)
Open dd-mm-yyyy-date.pipe.ts file and add the below code.
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
@Pipe({
name: 'ddMmYYYYDate'
})
export class DdMmYYYYDatePipe extends DatePipe implements PipeTransform {
override transform(value: any, args?: any): any {
return super.transform(value, 'dd/MM/YYYY');
}
}
The above code extends the DatePipe and overrides the transform method of date pipe to convert the date to ‘dd/MM/YYYY’ format.
Go through this article to understand the code in a better manner.
Now in component template display the date using newly created custom pipe.
{{date | ddMmYYYYDate}}
Remember pass the format correctly “dd/MM/YYYY”. d-day small letter, M-month capital letter and year does not matter.
Similarly we can create whichever format we want, go through the below article to know the complete list of custom date formats.
StackBlitz Demo
Here is code and StackBlitz demo link
