+ = ngx-date-fns

date-fns pipes for Angular 2.0 and above.

Installation

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

npm install --save [email protected]
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

• dfnsDistanceInWords (impure)
• dfnsDistanceInWordsStrict (impure)
• dfnsDistanceInWordsToNow (impure)

Min / Max

• dfnsMin
• dfnsMax

Misc

• dfnsClosestTo
• dfnsFormat (impure)

Get

• dfnsGetOverlappingDaysInRanges
• dfnsGetTime
• dfnsGetMilliseconds
• dfnsGetSeconds
• dfnsGetMinutes
• dfnsGetHours
• dfnsGetDate
• dfnsGetDayOfYear
• dfnsGetDay
• dfnsGetISODay
• dfnsGetISOWeek
• dfnsGetDaysInMonth
• dfnsGetMonth
• dfnsGetQuarter
• dfnsGetDaysInYear
• dfnsGetYear
• dfnsGetISOWeeksInYear
• dfnsGetISOYear

Difference

• dfnsDifferenceInMilliseconds
• dfnsDifferenceInSeconds
• dfnsDifferenceInMinutes
• dfnsDifferenceInHours
• dfnsDifferenceInCalendarDays
• dfnsDifferenceInDays
• dfnsDifferenceInCalendarWeeks
• dfnsDifferenceInWeeks
• dfnsDifferenceInCalendarISOWeeks
• dfnsDifferenceInCalendarMonths
• dfnsDifferenceInMonths
• dfnsDifferenceInCalendarQuarters
• dfnsDifferenceInQuarters
• dfnsDifferenceInCalendarYears
• dfnsDifferenceInYears
• dfnsDifferenceInCalendarISOYears
• dfnsDifferenceInISOYears

Add

• dfnsAddMilliseconds
• dfnsAddSeconds
• dfnsAddMinutes
• dfnsAddHours
• dfnsAddDays
• dfnsAddWeeks
• dfnsAddMonths
• dfnsAddQuarters
• dfnsAddYears
• dfnsAddISOYears

Subtract

• dfnsSubMilliseconds
• dfnsSubSeconds
• dfnsSubMinutes
• dfnsSubHours
• dfnsSubDays
• dfnsSubWeeks
• dfnsSubMonths
• dfnsSubQuarters
• dfnsSubYears
• dfnsSubISOYears

End

• dfnsEndOfSecond
• dfnsEndOfMinute
• dfnsEndOfHour
• dfnsEndOfDay
• dfnsEndOfToday
• dfnsEndOfTomorrow
• dfnsEndOfYesterday
• dfnsEndOfWeek
• dfnsEndOfISOWeek
• dfnsEndOfMonth
• dfnsEndOfQuarter
• dfnsEndOfYear
• dfnsEndOfISOYear

Start

• dfnsStartOfSecond
• dfnsStartOfMinute
• dfnsStartOfHour
• dfnsStartOfDay
• dfnsStartOfToday
• dfnsStartOfTomorrow
• dfnsStartOfYesterday
• dfnsStartOfWeek
• dfnsStartOfISOWeek
• dfnsStartOfMonth
• dfnsStartOfQuarter
• dfnsStartOfYear
• dfnsStartOfISOYear

Last

• dfnsLastDayOfWeek
• dfnsLastDayOfISOWeek
• dfnsLastDayOfMonth
• dfnsLastDayOfQuarter
• dfnsLastDayOfYear
• dfnsLastDayOfISOYear