TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published


    Angular pipes based on date-fns. Date pipe, time-ago pipe, minDate pipe, maxDate pipe, distanceBetweenDates pipe. I initially built these for Ionic projects, because the Angular date pipe was not performing well on all mobile devices, and the date-fns functions were not exhibiting problems. However, no use of Ionic is required. This npm library should work with any Angular 5 project, and any Ionic 3 project. All date-fns locales are supported.


    npm install ng-datefns-pipes-all-locales --save

    Sample usage (Examples in English)

    Date pipe:

    napoleon = new Date(1804, 11, 2);                           // in ts file
    Napoleon crowned himself emperor on {{ napoleon | date }}.  // in template
    Napoleon crowned himself emperor on December 2nd, 1804.     // output

    Time ago pipe:

    aquinas = new Date(1274, 2, 7);          // in ts file
    Aquinas died {{ aquinas | ago }}.<br>    // in template
    Aquinas died almost 744 years ago.       // output

    Time ago pipe second example:

    now = new Date();                              // in ts file
    You entered this page {{ now | ago }}.         // in template
    You entered this page less than 5 seconds ago. // output (updates every 15 seconds)

    Distance between dates:

    datePair = [ this.aquinas, this.napoleon ];                                                // in ts file
    Aquinas's and Napoleon's actions were separated by {{ datePair | distanceBetweenDates }}.  // in template
    Aquinas's and Napoleon's actions were separated by almost 531 years.                       // output

    Min date:

    dateArray = [ this.aquinas, this.napoleon, ];    // in ts file
    The earliest of those dates is {{ dateArray | minDate }}. // in template
    The earliest of those dates is March 7th, 1274.           // output 

    Max date:

    The most recent of those dates is {{ dateArray | maxDate }}. // in template (ts file same as before)
    The most recent of those dates is ___.    // <-- output, blank contains today's date

    Basic setup

    In app.module.ts:

    import { DatePipesModule } from 'ng-datefns-pipes';
      declarations: [],
      imports: [
        DatePipesModule.forRoot() // < -- add this line
      bootstrap: [],
      entryComponents: [],
      providers: []
    export class AppModule {}

    This gives you access to all the (English language) date pipes, with the default configuration.

    Advanced Setup

    You can specify a default date format; whether date distance functions include seconds; and the prefix, suffix, refresh rate and use of seconds of the timeAgo pipe. (For more detail about these settings, see the API below. You can also set and reset each setting during the program by injecting the DatePipeManager.) You can aso set as default any locale supported by date-fns. (There are over 30.)

    In app.module.ts:

    import { DatePipesModule, DatePipeConfiguration, Locale } from 'ng-datefns-pipes';
    const DATE_PIPE_CONFIG: DatePipeConfiguration = {
       defaultDateFormat: 'your date format string',    // default: 'MMMM Do, YYYY'
       dateDistanceIncludesSeconds: your boolean here,  // default: false
       agoPipeOptions: {
         refreshRate: your milliseconds here,           // default: 15000
         prefix: 'your prefix string',                  // default: ''
         suffix: 'your suffix string',                  // default: ' ago' <-- note the space
         includeSeconds: your boolean here              // default: false
    const DEFAULT_LOCALE: Locale = Locale.FRENCH        // <-- substitute for any other supported locale, e.g., Locale.THAI
                                                        //     Locale is an enum
      declarations: [],
      imports: [
        DatePipesModule.forRoot(DATE_PIPE_CONFIG, DEFAULT_LOCALE) // < -- add this line
      bootstrap: [],
      entryComponents: [],
      providers: []
    export class AppModule {}


    npm i ng-datefns-pipes-all-locales

    DownloadsWeekly Downloads






    Last publish


    • aaronsterling