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({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<h3>{{date | date: 'ddMMyyyy'}}, should be
{{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}</h3>
</div>
`,
directives: []
})
export class App {
constructor() {
this.name = 'Angular2'
this.date = new Date();
}
}
You can find more information about the date pipe here, such as formats.
If you want to use it in your component, you can simply do
Now, you can simply use its transform method, which will be
Pipe date format bug fixed in Angular 2.0.0-rc.2, this Pull Request.
Now we can do the conventional way:
Examples:
Current Version:
Plunker Angular 6.x.x
Old Versions:
Plunker Angular 2.x
Plunker Angular 4.x
If anyone can looking to display date with time in AM or PM in angular 6 then this is for you.
Output
Pre-defined format options
Examples are given in en-US locale.
Reference Link
Import DatePipe from angular/common and then use the below code:
where userdate will be your date string. See if this helps.
Make note of the lowercase for date and year :
EDIT
You have to pass
locale
string as an argument to DatePipe, in latest angular. I have tested in angular 4.xFor Example:
Date pipes does not behave correctly in Angular 2 with Typescript for Safari browser on MacOS and iOS. I faced this issue recently. I had to use moment js here for resolving the issue. Mentioning what I have done in short...
Add momentjs npm package in your project.
Under xyz.component.html, (Note here that startDateTime is of data type string)
{{ convertDateToString(objectName.startDateTime) }}
import * as moment from 'moment';
I always use Moment.js when I need to use dates for any reason.
Try this:
And in the view: