Angular DatePipe is used to format dates according to the given date formats, timezone, and country locale information. For example, 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.
To use the DatePipe in your Angular application, import CommonModule from @angular/common. You can apply the DatePipe directly within your HTML template using the pipe (|) symbol.
Pipes can format data such as currencies, percentages, dates, and more. They are meant to be used in HTML templates like component.html files.
Syntax
{{ date_Value | date [ : format [ : timezone [ : locale ] ] ] }}
Parameters
Angular DatePipe accepts three parameters.
- 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′), standard UTC/GMT (IST), or continental US timezone abbreviation, 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 locale data. For more information, see the I18n guide.
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.
Example
Write the following code inside the app.component.ts file.
import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, CommonModule, FormsModule], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent { currentDate = new Date(); }
Now, write the following code inside the app.component.html file.
<!-- Predefined format options --> <div style="margin-left: 40px"> <p>{{ currentDate | date }}</p> <!-- default format --> <p>{{ currentDate | date : "short" }}</p> <p>{{ currentDate | date : "medium" }}</p> <p>{{ currentDate | date : "long" }}</p> <p>{{ currentDate | date : "full" }}</p> <!-- Custom format options --> <p>{{ currentDate | date : "yyyy-MM-dd" }}</p> <!-- Example: 2024-06-05 --> <p>{{ currentDate | date : "dd/MM/yyyy" }}</p> <!-- Example: 05/06/2024 --> <p>{{ currentDate | date : "MMM d, y, h:mm:ss a" }}</p> <!-- Example: Jun 5, 2024, 5:30:00 PM --> </div>
Start the development server using this command:
ng serve --open
Here is the output:
List of all Predefined Date Formats
‘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).
That is it.