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 string 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.
- Format
- Timezone
- 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.
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 must 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.
