Angular Date Pipe - Format Date as mm/dd/yyyy or dd/mm/yyyy in Angular
Example built with Angular 15.1.3 and Angular Date Pipe
This is a quick example of how to to format a date as mm/dd/yyyy or dd/mm/yyyy using the Angular date pipe. The example includes how to display time in 24 hour format and 12 hour time format with AM/PM.
Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/angular-date-pipe-format-date-as-mm-dd-yyyy)
Date Formatting Examples with Angular Date Pipe
The example app component template contains all the html markup for displaying dates in different formats using the Angular date pipe. The now property is initialized to the current date in the app component below.
<div class="card m-3">
<h5 class="card-header text-center">Angular Date Pipe - Format Date as 'mm/dd/yyyy' or 'dd/mm/yyyy'</h5>
<div class="card-body">
<ul class="mb-0">
<li><code ngNonBindable>{{ now | date: 'MM/dd/yyyy' }}</code> : {{ now | date: 'MM/dd/yyyy' }}</li>
<li><code ngNonBindable>{{ now | date: 'dd/MM/yyyy' }}</code> : {{ now | date: 'dd/MM/yyyy' }}</li>
<li><code ngNonBindable>{{ now | date: 'yyyy-MM-dd' }}</code> : {{ now | date: 'yyyy-MM-dd' }}</li>
<li><code ngNonBindable>{{ now | date: 'HH:mm' }}</code> : {{ now | date: 'HH:mm' }}</li>
<li><code ngNonBindable>{{ now | date: 'h:mm a' }}</code> : {{ now | date: 'h:mm a' }}</li>
<li><code ngNonBindable>{{ now | date: 'MM/dd/yyyy HH:mm' }}</code> : {{ now | date: 'MM/dd/yyyy HH:mm' }}</li>
<li><code ngNonBindable>{{ now | date: 'yyyy-MM-dd-HH-mm-ss' }}</code> : {{ now | date: 'yyyy-MM-dd-HH-mm-ss' }}</li>
</ul>
</div>
</div>
Angular App Component
The component initializes the now property with the current date (new Date()) which is formatted in the component template using the Angular date pipe.
import { Component } from '@angular/core';
@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {
now = new Date();
}
Need Some Angular Help?
Search fiverr to find help quickly from experienced Angular freelance developers.
Follow me for updates
I share all new blog posts on Twitter and Facebook.
When I'm not coding
My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.
Comments
Support the blog
