Formatting Dates with Pipes in Angular

Using the DatePipe channel, we can set a specific format for the output date. This channel can accept the following parameters for the date display format:

Examples

Let's look at the channel's operation using examples. To do this, in the component class, we'll set the myDate property, into which we'll write the date:

app/app.component.tsexport class AppComponent {
  public myDate: number = Date.parse('2025-12-31');
}

Example

Let's output our date without passing any parameters to the channel:

app/app.component.html<div>
  {{ myDate | date }}
</div>

The result of the executed code:

html<div>Dec 31, 2025</div>

Example

Now let's display a short date output:

app/app.component.html<div>
  {{ myDate | date:'shortDate' }}
</div>

The result of the executed code:

html<div>12/31/25</div>

Example

Let's display our date and at the same time find out what day of the week it falls on:

app/app.component.html<div>
  {{ myDate | date:'fullDate' }}
</div>

The result of the executed code:

html<div>Wednesday, December 31, 2025</div>

Practical tasks

typescriptpublic myDate: number = Date.parse('2025-01-02');

typescript'Jan 2, 2025'

typescript'1/2/25, 3:00 AM'

typescript'1/2/25'

typescript'January 2, 2025 at 3:00:00 AM GMT+3'

typescript'Thursday, January 2, 2025'