Angular's date pipe that transforms a date into various formats.
Questions tagged [date-pipe]
119 questions
371
votes
17 answers
Format date as dd/MM/yyyy using pipes
I'm using the date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible?
//our root app component
import {Component} from 'angular2/core'
@Component({
…

Jp_
- 5,973
- 4
- 25
- 36
180
votes
15 answers
How to set locale in DatePipe in Angular 2?
I want to display Date using European format dd/MM/yyyy but using DatePipe shortDate format it only display using US date style MM/dd/yyyy.
I'm assuming thats the default locale is en_US. Maybe I am missing in the docs but how can I change the…

nsbm
- 5,842
- 6
- 30
- 45
60
votes
7 answers
Angular 4 date pipe displays wrong date because of time zones - how to fix this?
I have a date value in each of my objects that I can Print like this:
{{competition.compStart }}
And here is how it looks:
1931-05-31T00:00:00.000+0000
In order to change the format to make it more readable I'm using the Angular date…

Matias Diez
- 1,237
- 2
- 17
- 26
49
votes
2 answers
How to use angular2 built-in date pipe in services and directives script files
I want to use angular2's date pipe in services and directives script files(not only in HTML).
Does anyone have any ideas?
Can't upload code cos some policy restrictions, sorry about that.

Chen Dachao
- 1,736
- 2
- 21
- 36
45
votes
5 answers
How do I escape characters in an Angular date pipe?
I have an Angular date variable today that I'm using the date pipe on, like so:
{{today | date:'LLLL d'}}
February 13
However, I would like to make it appear like this:
13 days so far in February
When I try a naive approach to this, I get this…

Thunderforge
- 19,637
- 18
- 83
- 130
21
votes
6 answers
Angular 4 Date Pipe converting wrongly
I have rest service which returns a collection of objects and one of the field of the item is a date string (ISO-8601 format ) and the date value as follows
"createdDate" : "2017-02-21T12:56:50.907",
In the angular4 UI I put DatePipe to format the…

Jo Paul
- 783
- 1
- 9
- 14
19
votes
2 answers
Include text in Angular 2+ Date Pipe format
I am attempting to use the DatePipe in Angular 2. I want the output date to be in the format: 08/23/2017 at 11:07 AM.
However, I can't figure out the proper way to include the text at in my date format.
When I specify the format as such: {{my_date |…

Andrew Mairose
- 10,615
- 12
- 60
- 102
15
votes
4 answers
How to get date and time in Angular 4,5,6 and above using DatePipe
I am working in an angular 4 application, Here I need to get the current Date and Time Using angular DatePipe.
I want to get the date and time in the following format
dd-mm-yyyy hh:MM:ss AM/PM
I got the expected by using the Angular DatePipe as…

Nikson
- 900
- 2
- 21
- 51
13
votes
3 answers
Override Angular default date pipe
I need to override the default Angular 7 date pipe formats (medium, short, fullDate, etc.), because I don't want to use two date pipes (the default one and a custom one), so I made the following and was wondering is a good idea to do it like so:
//…

Marin Takanov
- 1,079
- 3
- 19
- 36
13
votes
3 answers
Angular DatePipe - Convert seconds to time with zero timezone (12 instead of 00)
I want to convert number (which represents seconds) using DatePipe
to get result like this :
00:00:05
I've tried doing so with DatePipe this way:
But it produces result with…

Just Shadow
- 10,860
- 6
- 57
- 75
9
votes
1 answer
Date not updating after change of a month
I just making a simple view where I can Change a month :
{{currentDate|date:'MMMM'}}
and then in…

pb4now
- 1,305
- 4
- 18
- 45
9
votes
3 answers
Angular Date Pipe Printing Wrong Date After Transforming Original Date Value
I am using Angular's date pipe in my Angular 2 app in order to format the dates in a more human-friendly format. I am able to pull in dates from the API, and edit and save those dates to the API successfully. However, I'm running into an issue where…

Muirik
- 6,049
- 7
- 58
- 116
6
votes
4 answers
Angular 2 Datepipe formatting based on browser location/settings
Is there a way to make the datepipe dynamic so that if it's an American browser the datepipe returns the American format (yyyy/MM/dd) and when it's a European browser it returns the European format (dd/MM/yyyy)?
Thanks

Martijn van den Bergh
- 1,434
- 1
- 20
- 40
5
votes
0 answers
Angular custom date format adapted to locale
I need to display dates based on locale. All goes well when I use the predefined formats (https://angular.io/api/common/DatePipe#pre-defined-format-options)
import { formatDate } from '@angular/common';
...
//if `format` is one from the predefined…

bokkie
- 1,477
- 4
- 21
- 40
5
votes
4 answers
How can I customize date and time format in ngx-mat-datetime-picker?
I am working on Angular7 and its compatible ngx-mat-datetime-picker. It works as expected.
Want to customize the format:
Actual: mm/dd/yyyy, hh:mm:ss
Expected: yyyy-mm-dd hh:mm:ss
Currently I don't find any option for formatting.
I tried something…

Gnik
- 7,120
- 20
- 79
- 129