AppDividend
Latest Code Tutorials

Angular Date Format: How to Use Angular DatePipe

0

Angular DatePip is an inbuilt pipe that formats a date value according to locale rules. To format Date in Angular, use DatePipe. Using DatePipe, you can convert the Date object, a number (milliseconds from UTC), or an ISO date strings according to provided predefined angular date formats or custom angular date formats.

How to Use Angular DatePipe

DatePipe is introduced in the @angular/common module. Pipes in Angular can be used to format data such as currencies, percents, dates, and more. They are meant to be used in HTML templates like component.html file.

Angular DatePipe accepts three parameters.

  1. Format
  2. Timezone
  3. Locale
{{ date_Value | date [ : format [ : timezone [ : locale ] ] ] }}
Parameter Description
format You can pass predefined Angular Date Formats or our custom date format as a parameter.

The default value is ‘mediumDate’ (Optional parameter).

timezone The default timezone is the local system timezone of the user’s machine.

To change the timezone in Angular, pass the timezone offset (‘0530′) or standard UTC/GMT (IST) or continental US timezone abbreviation, and it is an optional parameter.

locale It represents the locale format rules to use.

The default value is our project locale (en_US) if set or undefined. Optional parameter.

Only the en-US locale data comes out of the box with Angular. To localize the dates in another language, you must import relevant to the locale data. See the I18n guide for more information.

Note: The result of this pipe is not reevaluated when the input is mutated. To avoid the need to reformat the Date on every change-detection cycle, treat the Date as an immutable object, and change the reference when the pipe needs to run again.

Here is a simple example where I format a date.

Write the following code inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  now = new Date();
}

Now, write the following code inside the app.component.html file.

<div class="container">
  {{now | date}}
</div>

The above code will apply the date pipe to the input date in our case now.

In that specific example, Angular would use its default date format to return the formatted Date.

Output

Jul 15, 2020

To display only 4-digit year in Date, use the following.

<!-- app.component.html -->

<div class="container">
  {{now | date:'yyyy'}}
</div>

Output

2020

You can also display a raw date in Angular, like the following.

<div class="container">
  {{now}}
</div>

Output

Wed Jul 15 2020 17:45:35 GMT+0530 (India Standard Time)

Now, let’s add some current datetime values in different formats like milliseconds, date object,datetime string, ISO datetime string in Angular.

Write the following code inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todaysNumber: number = Date.now();
  todaysDate: Date = new Date();
  todayString: string = new Date().toDateString();
  todayISOString: string = new Date().toISOString();
}

In the app component HTML file, I am displaying them using an Angular DatePipe.

<!-- app.component.html -->

<div class="container">
  <p>DateTime as Milliseconds : {{todaysNumber}}</p>
  <p>DatePipe:{{todaysNumber | date}}</p>
  
  <p>DateTime as Object : {{todaysDate}}</p>
  <p>DatePipe:{{todaysDate | date}}</p>
  
  <p>DateTime as String : {{todayString}}</p>
  <p>DatePipe:{{todayString | date}}</p>
  
  <p>DateTime as ISO string : {{todayISOString}}</p>
  <p>DatePipe:{{todayISOString | date}}</p>
</div>

Output

DateTime as Milliseconds : 1594815694582

DatePipe:Jul 15, 2020

DateTime as Object : Wed Jul 15 2020 17:51:34 GMT+0530 (India Standard Time)

DatePipe:Jul 15, 2020

DateTime as String : Wed Jul 15 2020

DatePipe:Jul 15, 2020

DateTime as ISO string : 2020-07-15T12:21:34.582Z

DatePipe:Jul 15, 2020

You can see that we have taken DateTime as Object, DateTime as String, DateTime as ISO String, and when we use DatePipe, then it will convert to one standard format.

All types of datetime values display the Date in ‘MMM d, y’ format which is default Angular date format ‘mediumDate’

To change the DateTime format in Angular, we have to pass the DateTime format parameter to the AngularPipe.

<!-- app.component.html -->

<div class="container">
  <p>DateTime as Milliseconds : {{todaysNumber}}</p>
  <p>DatePipe:{{todaysNumber | date :'short'}}</p>
  
  <p>DateTime as Object : {{todaysDate}}</p>
  <p>DatePipe:{{todaysDate | date :'short'}}</p>
  
  <p>DateTime as String : {{todayString}}</p>
  <p>DatePipe:{{todayString | date :'short'}}</p>
  
  <p>DateTime as ISO string : {{todayISOString}}</p>
  <p>DatePipe:{{todayISOString | date :'short'}}</p>
</div>

In this example, we are using the short-expression for a Date in Angular.

Output

DateTime as Milliseconds : 1594816050572

DatePipe:7/15/20, 5:57 PM

DateTime as Object : Wed Jul 15 2020 17:57:30 GMT+0530 (India Standard Time)

DatePipe:7/15/20, 5:57 PM

DateTime as String : Wed Jul 15 2020

DatePipe:7/15/20, 12:00 AM

DateTime as ISO string : 2020-07-15T12:27:30.572Z

DatePipe:7/15/20, 5:57 PM

List of all Predefined Date Formats in Angular

short‘: It is equivalent to ‘M/d/yy, h:mm a’ (6/15/20, 9:03 AM).

medium‘: It is equivalent to ‘MMM d, y, h:mm:ss a’ (Jun 15, 2020, 9:03:01 AM).

long‘: It is equivalent to ‘MMMM d, y, h:mm:ss a z’ (June 15, 2020 at 9:03:01 AM GMT+1).

full‘: It is equivalent to ‘EEEE, MMMM d, y, h:mm:ss a zzzz’ (Monday, July 15, 2020, at 9:03:01 AM GMT+01:00).

shortDate‘: It is equivalent to ‘M/d/yy’ (6/15/20).

mediumDate’: It is equivalent to ‘MMM d, y’ (Jun 15, 2020).

longDate’: It is equivalent to ‘MMMM d, y’ (June 15, 2020).

fullDate’: It is equivalent to ‘EEEE, MMMM d, y’ (Monday, June 15, 2020).

shortTime‘: It is equivalent to ‘h:mm a’ (9:03 AM).

mediumTime‘: It is equivalent to ‘h:mm:ss a’ (9:03:01 AM).

longTime‘: It is equivalent to ‘h:mm:ss a z’ (9:03:01 AM GMT+1).

fullTime‘: It is equivalent to ‘h:mm:ss a zzzz’ (9:03:01 AM GMT+01:00).

Angular Date Format examples

Write the following code inside the app.component.html file.

<div class="container">
  <p>DateTime as Milliseconds : {{todaysNumber}}</p>
  <p>DatePipe:{{todaysNumber | date :'short'}}</p>
  
  <p>DateTime as Object : {{todaysDate}}</p>
  <p>DatePipe:{{todaysDate | date :'medium'}}</p>
  
  <p>DateTime as String : {{todayString}}</p>
  <p>DatePipe:{{todayString | date :'shortTime'}}</p>
  
  <p>DateTime as ISO string : {{todayISOString}}</p>
  <p>DatePipe:{{todayISOString | date :'mm:ss'}}</p>
</div>

Output

DateTime as Milliseconds : 1594871494181

DatePipe:7/16/20, 9:21 AM

DateTime as Object : Thu Jul 16 2020 09:21:34 GMT+0530 (India Standard Time)

DatePipe:Jul 16, 2020, 9:21:34 AM

DateTime as String : Thu Jul 16 2020

DatePipe:12:00 AM

DateTime as ISO string : 2020-07-16T03:51:34.182Z

DatePipe:21:34

That is it for the Angular Date Format example.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.