+ = 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 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
- dfnsDistanceInWords (impure)
- dfnsDistanceInWordsStrict (impure)
- dfnsDistanceInWordsToNow (impure)
Min / Max
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
Library created with ng-lib-schematics