date-fns pipes for Angular 2.0 and above
Clone or download
Latest commit ec21b2c Aug 14, 2018

README.md

+ = ngx-date-fns

Build Status codecov npm version Known Vulnerabilities Greenkeeper badge Conventional Commits

date-fns pipes for Angular 2.0 and above.

Installation

This library has been tested with date-fns v1.29.

npm install --save date-fns
npm install --save ngx-date-fns

Basic Usage

Import DateFnsModule into your app's modules:

import {DateFnsModule} from 'ngx-date-fns';

@NgModule({
  imports: [
    // (...)
    DateFnsModule.forRoot()
  ]
})
import { Component } from '@angular/core';
import * as esLocale from 'date-fns/locale/es/index.js';

@Component({
  selector: 'my-component',
  template: `
    <p>
      {{ dateOne | dfnsFormat : 'YYYY/MM/DD' }}
    </p>
    <p>
      {{ [dateOne, dateTwo] | dfnsMin }}
    </p>
    <p>
      {{ [dateOne, dateTwo] | dfnsMax | dfnsFormat : 'YYYY/MM/DD' }}
    </p>
    <p>
      {{ dateThree | dfnsDistanceInWordsToNow : options }}
    </p>
  `
})
export class AppComponent {
  dateOne = new Date(2016, 0, 1);
  dateTwo = new Date(2017, 0, 1);
  dateThree;
  options = {
    locale: esLocale
  }
  constructor() {
    this.dateThree = new Date();
    this.dateThree.setDate(-6);
  }
}

The output:

2016/01/01

Fri Jan 01 2016 00:00:00 GMT+0100 (CET)

2017/01/01

alrededor de 1 mes

Working with locales

All locale aware pipes use English by default.

Changing locale globally

Instead of passing the locale to each pipe via options you can set it globally in one single step by overriding the default DateFnsConfiguration implementation:

import { DateFnsModule } from 'ngx-date-fns';
import * as frLocale from "date-fns/locale/fr/index.js";

const frenchConfig = new DateFnsConfigurationService();
frenchConfig.setLocale(frLocale);

@NgModule({
  imports: [
    // (...)
    DateFnsModule.forRoot()
  ],
  providers: [ 
    // (...)
    { provide: DateFnsConfigurationService, useValue: frenchConfig } // <-- All pipies in French by default
  ]
})

Changing locale at runtime

It is also possible to change the default locale at runtime:

import { Component } from "@angular/core";
import { DateFnsConfigurationService } from "../lib/src/date-fns-configuration.service";
import * as esLocale from "date-fns/locale/es/index.js";
import * as deLocale from "date-fns/locale/de/index.js";

@Component({
  selector: "app-root",
  template: `
    <p>
      {{ dateOne | dfnsFormat : 'ddd MMM D YYYY' }}
    </p>
    <hr>
    Set default locale to: 
      <a href="#" (click)="changeToGerman()">German</a>, 
      <a href="#" (click)="changeToSpanish()">Spanish</a>.
  `
})
export class AppComponent {
  dateOne = new Date(2016, 0, 1);
  constructor(public config: DateFnsConfigurationService) {}
  changeToGerman() {
    this.config.setLocale(deLocale);
  }
  changeToSpanish() {
    this.config.setLocale(esLocale);
  }
}

Available pipes

All pipes are pure unless stated otherwise.

Distance

Min / Max

Misc

Get

Difference

Add

Subtract

End

Start

Last


Library created with ng-lib-schematics