date-fns pipes for Angular applications.
The latest version of this library requires:
- date-fns
>= v3.0.0. - Angular
>= v17.0.0.
npm install --save date-fnsnpm install --save ngx-date-fns
npm install --save [email protected]npm install --save [email protected]- [email protected] docs
⚠️ There's a range of date-fns versions for which tree shaking is broken, so we recommend that you either installv2.16.1or>= v2.21.1.
npm install --save [email protected]npm install --save [email protected]- [email protected] docs
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { es } from 'date-fns/locale';
import { DateFnsModule } from 'ngx-date-fns';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, DateFnsModule],
template: `
<p>{{ dateOne | dfnsFormat: 'MM/dd/yyyy' }}</p>
<p>{{ [dateOne, dateTwo] | dfnsMin | dfnsFormat: 'EEE LLLL d yyyy' }}</p>
<p>
{{ [dateOne, dateTwo] | dfnsMax | dfnsFormat: 'EEE LLLL d yyyy' }}
</p>
<p>
{{ dateThree | dfnsFormatDistanceToNow: options }} - (Explicit 'es'
locale)
</p>
<p>{{ 0 | dfnsWeekdayName: 'full':options }} - (Explicit 'es' locale)</p>
<p>
{{
'12 de Marzo'
| dfnsParse: parseFormat:parseDate:parseLocale
| dfnsFormat: 'MM/dd/yyyy'
}}
</p>
`
})
export class App {
dateOne = new Date(2016, 0, 1);
dateTwo = new Date(2017, 0, 1);
dateThree: Date;
options = {
locale: es,
addSuffix: true
};
parseDate = new Date(2010, 0, 1);
parseFormat = `do 'de' MMMM`;
parseLocale = { locale: es };
constructor() {
this.dateThree = new Date();
this.dateThree.setDate(this.dateThree.getDate() - 6);
}
}
bootstrapApplication(App);The output:
01/01/2016
Fri January 1 2016
Sun January 1 2017
hace 6 días - (Explicit 'es' locale)
lunes - (Explicit 'es' locale)
03/12/2010
All locale-aware pipes use English by default.
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:
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { DateFnsConfigurationService } from 'ngx-date-fns';
import { fr } from 'date-fns/locale';
const frenchConfig = new DateFnsConfigurationService();
frenchConfig.setLocale(fr);
export const appConfig: ApplicationConfig = {
providers: [{ provide: DateFnsConfigurationService, useValue: frenchConfig }]
};// main.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { es } from 'date-fns/locale';
import { DateFnsModule } from 'ngx-date-fns';
import { appConfig } from './app.config';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, DateFnsModule],
template: `
(...)
`
})
export class App {
// (...)
}
bootstrapApplication(App, appConfig).catch(err => console.error(err));It is also possible to change the default locale at runtime:
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { es, de } from 'date-fns/locale';
import { DateFnsConfigurationService, DateFnsModule } from 'ngx-date-fns';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, DateFnsModule],
template: `
<p>{{ dateOne | dfnsFormat: 'EEE LLLL d yyyy' }}</p>
<hr />
Set default locale to: <a href="#" (click)="changeToGerman()">German</a>,
<a href="#" (click)="changeToSpanish()">Spanish</a>.
`
})
export class App {
dateOne = new Date(2016, 0, 1);
constructor(public config: DateFnsConfigurationService) {}
changeToGerman() {
this.config.setLocale(de);
}
changeToSpanish() {
this.config.setLocale(es);
}
}
bootstrapApplication(App);Should I use the pure or impure version of the locale-aware pipes?
The answer is quite simple:
- Do you set the locale only once when the application starts?
- Use only pure pipes.
- Do you need to change the locale at runtime?
- Use impure pipes.
The main difference is that pure pipes do not get notified when the locale is changed via DateFnsConfiguration.setLocale(locale: Locale), because the instance is not kept in memory. Impure pipes, on the other hand, are kept in memory and listen for Locale change notifications, which adds some memory and performance overhead.
All pipes are pure unless stated otherwise.
Since
v7.0.0invalid Dates will return an empty string instead of throwing an exception.
- dfnsFormat (impure)
- dfnsFormatRelative (impure)
- dfnsFormatDistance (impure)
- dfnsFormatDistanceStrict (impure)
- dfnsFormatDistanceToNow (impure)
- dfnsFormatDistanceToNowStrict (impure)
- dfnsFormatDuration (impure)
- dfnsGetOverlappingDaysInIntervals
- dfnsGetTime
- dfnsGetMilliseconds
- dfnsGetSeconds
- dfnsGetMinutes
- dfnsGetHours
- dfnsGetDate
- dfnsGetDayOfYear
- dfnsGetDay
- dfnsGetISODay
- dfnsGetISOWeek
- dfnsGetDaysInMonth
- dfnsGetMonth
- dfnsGetQuarter
- dfnsGetDaysInYear
- dfnsGetYear
- dfnsGetISOWeeksInYear
- dfnsGetISOWeekYear
- dfnsGetUnixTime
- dfnsGetWeek (impure)
- dfnsGetWeekOfMonth (impure)
- dfnsGetWeeksInMonth (impure)
- dfnsGetDecade
- dfnsGetWeekYear (impure)
- dfnsDifferenceInMilliseconds
- dfnsDifferenceInSeconds
- dfnsDifferenceInMinutes
- dfnsDifferenceInHours
- dfnsDifferenceInCalendarDays
- dfnsDifferenceInBusinessDays
- dfnsDifferenceInDays
- dfnsDifferenceInCalendarWeeks
- dfnsDifferenceInWeeks
- dfnsDifferenceInCalendarISOWeeks
- dfnsDifferenceInCalendarMonths
- dfnsDifferenceInMonths
- dfnsDifferenceInCalendarQuarters
- dfnsDifferenceInQuarters
- dfnsDifferenceInCalendarYears
- dfnsDifferenceInYears
- dfnsDifferenceInCalendarISOWeekYears
- dfnsDifferenceInISOWeekYears
- dfnsAddMilliseconds
- dfnsAddSeconds
- dfnsAddMinutes
- dfnsAddHours
- dfnsAddBusinessDays
- dfnsAddDays
- dfnsAddWeeks
- dfnsAddMonths
- dfnsAddQuarters
- dfnsAddYears
- dfnsAddISOWeekYears
- dfnsSubMilliseconds
- dfnsSubSeconds
- dfnsSubMinutes
- dfnsSubHours
- dfnsSubDays
- dfnsSubWeeks
- dfnsSubMonths
- dfnsSubQuarters
- dfnsSubYears
- dfnsSubISOWeekYears
- dfnsEndOfSecond
- dfnsEndOfMinute
- dfnsEndOfHour
- dfnsEndOfDay
- dfnsEndOfToday
- dfnsEndOfTomorrow
- dfnsEndOfYesterday
- dfnsEndOfWeek
- dfnsEndOfISOWeek
- dfnsEndOfMonth
- dfnsEndOfQuarter
- dfnsEndOfYear
- dfnsEndOfISOWeekYear
- dfnsStartOfSecond
- dfnsStartOfMinute
- dfnsStartOfHour
- dfnsStartOfDay
- dfnsStartOfToday
- dfnsStartOfTomorrow
- dfnsStartOfYesterday
- dfnsStartOfWeek (impure)
- dfnsStartOfISOWeek
- dfnsStartOfMonth
- dfnsStartOfQuarter
- dfnsStartOfYear
- dfnsStartOfISOWeekYear
- dfnsStartOfDecade
- dfnsStartOfWeekYear (impure)
- dfnsLastDayOfWeek (impure)
- dfnsLastDayOfISOWeek
- dfnsLastDayOfMonth
- dfnsLastDayOfQuarter
- dfnsLastDayOfYear
- dfnsLastDayOfISOWeekYear
- dfnsLastDayOfDecade
- dfnsIsAfter
- dfnsIsBefore
- dfnsIsDate
- dfnsIsEqual
- dfnsIsFuture
- dfnsIsPast
- dfnsIsValid
- dfnsIsToday
- dfnsIsWeekend
- dfnsIsSameMonth
- dfnsIsSameYear
- dfnsIsExists
- dfnsIsFirstDayOfMonth
- dfnsIsFriday
- dfnsIsLastDayOfMonth
- dfnsIsLeapYear
- dfnsIsMatch (impure)
- dfnsIsMonday
- dfnsIsSameDay
- dfnsIsSameHour
- dfnsIsSameISOWeekYear
- dfnsIsSameISOWeek
- dfnsIsSameMinute
- dfnsIsSameMonth
- dfnsIsSameQuarter
- dfnsIsSameSecond
- dfnsIsSameWeek
- dfnsIsSameYear
- dfnsIsSaturday
- dfnsIsSunday
- dfnsIsThisHour
- dfnsIsThisISOWeek
- dfnsIsThisMinute
- dfnsIsThisMonth
- dfnsIsThisQuarter
- dfnsIsThisSecond
- dfnsIsThisWeek (impure)
- dfnsIsThisYear
- dfnsIsThursday
- dfnsIsToday
- dfnsIsTomorrow
- dfnsIsTuesday
- dfnsIsWednesday
- dfnsIsWithinInterval
- dfnsIsYesterday
A collection of utilities built around date-fns functions.
This pipe is (impure), but there's the pure version
dfnsFormatRelativeToNowPuretoo.
Same as dfnsFormatRelative but the date to comapre against is always Date.now().
This pipe is (impure)
Given a weekday number, returns its name.
Optional weekday format. Allowed values are:
x1: One char. 'M' for Monday.x2: Two chars. 'Mo' for Monday.x3: Three chars. 'Mon' for Monday.full: Full weekday name. 'Monday' for Monday.
Defaults to full.
Optional date-fns Locale object.
Optional locale object.
<div>
<!-- Prints Monday -->
{{ 0 | dfnsWeekdayName }}
</div>
<div>
<!-- Prints Mon -->
{{ 0 | dfnsWeekdayName : 'x3' }}
</div>
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent