1.9.0 • Published 7 years ago

angular2-moment v1.9.0

Weekly downloads
22,533
License
MIT
Repository
github
Last release
7 years ago

angular2-moment

moment.js pipes for Angular

Build Status

This module works with Angular 2.0 and above.

For the AngularJS version of this module, please see angular-moment.

Installation

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

For System.js users:

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'
            }
        }

Usage

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.

Available pipes

amTimeAgo pipe

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

amCalendar pipe

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

amDateFormat pipe

@Component({
  selector: 'app',
  template: `
    Last updated: {{myDate | amDateFormat:'LL'}}
  `
})

Prints Last updated: January 24, 2016

amParse pipe

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

amLocal pipe

Converts UTC time to local time.

@Component({
  selector: 'app',
  template: `
    Last updated: {{mydate | amLocal | amDateFormat: 'YYYY-MM-DD HH:mm'}}
  `
})

Prints Last updated 2016-01-24 12:34

amLocale pipe

To be used with amDateFormat pipe in order to change locale.

@Component({
  selector: 'app',
  template: `
    Last updated: {{'2016-01-24 14:23:45' | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}
  `
})

Prints Last updated: January 24th 2016, 2:23:45 pm

amFromUnix pipe

@Component({
  selector: 'app',
  template: `
    Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
  `
})

Prints Last updated: 01:46PM

amDuration pipe

@Component({
  selector: 'app',
  template: `
    Uptime: {{ 365 | amDuration:'seconds' }}
  `
})

Prints Uptime: 6 minutes

amDifference pipe

@Component({
  selector: 'app',
  template: `
    Expiration: {{nextDay | amDifference: today :'days' : true}} days
  `
})

Prints Expiration: 1 day

amAdd and amSubtract pipes

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

amFromUtc pipe

Parses the date as UTC and enables mode for subsequent moment operations (such as displaying the time in UTC). This can be combined with amLocal to display a UTC date in local time.

@Component({
  selector: 'app',
  template: `
    Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amFromUtc | amDateFormat: 'YYYY-MM-DD' }}
  `
})

Prints Last updated: 2017-01-01

amUtc pipe

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

Complete Example

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);

Demo

See online demo on Plunker

1.9.0

7 years ago

1.8.0

8 years ago

1.7.1

8 years ago

1.7.0

8 years ago

1.6.0

8 years ago

1.5.0

8 years ago

1.4.0

8 years ago

1.3.3

8 years ago

1.3.2

8 years ago

1.3.1

8 years ago

1.3.0

8 years ago

1.2.0

8 years ago

1.1.0

9 years ago

1.0.0

9 years ago

1.0.0-beta.rc.1

9 years ago

1.0.0-beta.6

9 years ago

1.0.0-beta.5

9 years ago

1.0.0-beta.4

9 years ago

1.0.0-beta.3

9 years ago

1.0.0-beta.2

9 years ago

1.0.0-beta.1

9 years ago

0.8.2

9 years ago

0.8.1

9 years ago

0.8.0

9 years ago

0.7.0

9 years ago

0.6.0

9 years ago

0.5.0

9 years ago

0.4.3

9 years ago

0.4.2

9 years ago

0.4.1

9 years ago

0.4.0

9 years ago

0.3.0

9 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago