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();
}
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Follow me on Twitter at https://twitter.com/jason_watmore
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Angular Help?
Search fiverr to find help quickly from experienced Angular developers.
Support my work
