How Date to be displayed

Question

Hi I have date displayed like below but i want to display only Date Part in dd/Mm/yyyy 2018-05-15T00:00:00.000+00:00 Thanks

Ramco Ramco · Answer

Hi Vishal Still getting same error. I am using angular 17 import { DatePipe } from '@angular/common'; D.O.B : {{ record.dateOfBirth | date: 'dd/MM/yyyy' }} Thanks

Aman Gupta · Answer

Hi Ramco To format the date string in Angular to display only the date part in dd/MM/yyyy format use these approches. Using Angular Date Pipe in HTML Template If you have a date string like 2018-05-15T00:00:00.000+00:00 and you want to display it in dd/MM/yyyy format you can use Angular's date pipe directly in your HTML template. Install Angular Common Module (if not already installed): Ensure you have imported the CommonModule in your module where you want to use the date pipe. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ imports: [ CommonModule ] }) export class YourModule { } Using the Date Pipe in HTML Template : Use the date pipe in your component's HTML template to format the date. {{ dateValue | date:'dd/MM/yyyy' }} Example Component Here's a full example to demonstrate how you can use the date pipe to format a date string in an Angular component: Component TypeScript File (example.component.ts) import { Component } from '@angular/core'; @Component({ selector: 'app-example' templateUrl: './example.component.html' }) export class ExampleComponent { dateValue: string = '2018-05-15T00:00:00.000+00:00'; } Component HTML File (example.component.html) Formatted Date: {{ dateValue | date:'dd/MM/yyyy' }} Parsing and Formatting Date in TypeScript If you need to format the date in TypeScript before binding it to the template you can use the DatePipe from Angular's common module: Import DatePipe in Your Component : import { Component } from '@angular/core'; import { DatePipe } from '@angular/common'; @Component({ selector: 'app-example' templateUrl: './example.component.html' providers: [DatePipe] }) export class ExampleComponent { dateValue: string = '2018-05-15T00:00:00.000+00:00'; formattedDate: string; constructor(private datePipe: DatePipe) { this.formattedDate = this.datePipe.transform(this.dateValue 'dd/MM/yyyy')!; } } Use the Formatted Date in HTML : Formatted Date: {{ formattedDate }} By following these steps you can easily format your date strings to display only the date part in dd/MM/yyyy format in your Angular application. Thanks

Vishal Joshi · Answer

Hello Ramco Add the below code to the component TS file. import { DatePipe } from '@angular/common'; Thanks

Ramco Ramco · Answer

Hi I am getting error - No Pipe found with name Date D.O.B : {{record.dateOfBirth | date:dd/MM/yyyy }} Thanks

Vishal Joshi · Answer

Hello Ramco You can use the DatePipe in angular to format the date. DatePipe Syntax {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }} Angular component HTML file you can use like below sample code {{ dateObj | date:dd/MM/yyyy }} Thanks Vishal Joshi

Ramco Ramco · Answer

Hi Amit I am using ANgular 17 Thanks

Amit Mohanty · Answer

Try this once: import CommonModule in your module and add CommonModule to the imports array

Vishal Joshi · Answer

Hello Ramco Checkout the below example of angular app.component.ts import { DatePipe } from '@angular/common'; import { Component } from '@angular/core'; @Component({ selector: 'my-app' templateUrl: './app.component.html' styleUrls: ['./app.component.css'] }) export class AppComponent { date = new Date(); } app.component.html Format Date as dd/MM/yyyy in Angular {{ date | date: 'dd/MM/yyyy' }} Running example on below link https://stackblitz.com/edit/format-date-as-ddmmyyyy-angular Thanks Vishal Joshi

Amit Mohanty · Answer

If you are using Angular's template syntax for formatting dates directly in the HTML you can use the date pipe directly in the template: {{ '2018-05-15T00:00:00.000+00:00' | date:'dd/MM/yyyy' }}

Asma Khalid · Answer

Use Moment.JS library for front-end date/time formatting i.e. http://bit.ly/2Fgnjj3