Published: February 06 2023

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.

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.


Need Some Angular Help?

Search fiverr to find help quickly from experienced Angular developers.



Supported by