moment.js pipes for Angular
This module works with Angular 2.0 and above.
For the AngularJS version of this module, please see angular-moment.
npm install --save angular2-moment
If you use typescript 1.8, and typings, you may also need to install typings for moment.js:
typings install --save moment
First you need to install moment:
npm install moment --save
Don't forget to update your systemjs.config.js:
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'moment': {
main: './moment.js',
defaultExtension: 'js'
},
'angular2-moment': {
main: './index.js',
defaultExtension: 'js'
}
}
Import MomentModule into your app's modules:
import { MomentModule } from 'angular2-moment';
@NgModule({
imports: [
MomentModule
]
})This makes all the angular2-moment pipes available for use in your app components.
Takes an optional omitSuffix argument that defaults to false.
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amTimeAgo}}
`
})Prints Last updated: a few seconds ago
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amTimeAgo:true}}
`
})Prints Last updated: a few seconds
Takes optional referenceTime argument (defaults to now)
and formats argument that could be output formats object or callback function.
See momentjs docs for details.
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amCalendar}}
`
})Prints Last updated: Today at 14:00 (default referenceTime is today by default)
@Component({
selector: 'app',
template: `
Last updated: <time>{{myDate | amCalendar:nextDay }}</time>
`
})
export class AppComponent {
nextDay: Date;
constructor() {
this.nextDay = new Date();
nextDay.setDate(nextDay.getDate() + 1);
}
}Prints Last updated: Yesterday at 14:00 (referenceTime is tomorrow)
@Component({
selector: 'app',
template: `
Last updated: <time>{{myDate | amCalendar:{sameDay:'[Same Day at] h:mm A'} }}</time>
`
})Prints Last updated: Same Day at 2:00 PM
@Component({
selector: 'app',
template: `
Last updated: {{myDate | amDateFormat:'LL'}}
`
})Prints Last updated: January 24, 2016
Parses a custom-formatted date into a moment object that can be used with the other pipes.
@Component({
selector: 'app',
template: `
Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}}
`
})Prints Last updated: January 24, 2016
@Component({
selector: 'app',
template: `
Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
`
})Prints Last updated: 01:46PM
@Component({
selector: 'app',
template: `
Uptime: {{ 365 | amDuration:'seconds' }}
`
})Prints Uptime: 6 minutes
@Component({
selector: 'app',
template: `
Expiration: {{nextDay | amDifference: today :'days' : true}} days
`
})Prints Expiration: 1 day
Use these pipes to perform date arithmetics. See momentjs docs for details.
@Component({
selector: 'app',
template: `
Expiration: {{'2017-03-17T16:55:00.000+01:00' | amAdd: 2 : 'hours' | amDateFormat: 'YYYY-MM-DD HH:mm'}}
`
})Prints Expiration: 2017-03-17 18:55
@Component({
selector: 'app',
template: `
Last updated: {{'2017-03-17T16:55:00.000+01:00' | amSubtract: 5 : 'years' | amDateFormat: 'YYYY-MM-DD HH:mm'}}
`
})Prints Last updated: 2012-03-17 16:55
Enables UTC mode for subsequent moment operations (such as displaying the time in UTC).
@Component({
selector: 'app',
template: `
Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amUtc | amDateFormat: 'YYYY-MM-DD' }}
`
})Prints Last updated: 2017-01-01
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { MomentModule } from 'angular2-moment';
@Component({
selector: 'app',
template: `
Last updated: <b>{{myDate | amTimeAgo}}</b>, <b>{{myDate | amCalendar}}</b>, <b>{{myDate | amDateFormat:'LL'}}</b>
`
})
export class AppComponent {
myDate: Date;
constructor() {
this.myDate = new Date();
}
}
@NgModule({
imports: [
BrowserModule,
MomentModule
],
declarations: [ AppComponent ]
bootstrap: [ AppComponent ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent