This Angular library provides a pipe that formats date intervals, given two dates. It does NOT display the time past between the two dates, rather it displays them in a more readable way.

From 12 to 14 August, 2020

Until 14 August, 2020

It takes locale into account too (English, French and Russian currently available).

Du 12 au 14 août 2020

С 12 до 14 дек. 2020 г.

npm install ng-date-interval

Import the module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NgDateIntervalModule } from 'ng-date-interval';

@NgModule({
  declarations: [],
  imports: [NgDateIntervalModule]
})
export class YourModule {}

// Component ts
...
date1 = new Date('2020-03-12');
date2 = new Date('2020-03-13');
...

<!-- Component html -->
{{ [date1, date2] | dateInterval }}

<!-- From 12 to 13 Mar, 2020 -->

{{ value_expression | dateInterval [ : format [ : locale ] ] ] }}

value_expression string | Date | Array<string | date> : the input date(s). Can be a date-like string or a Date instance or an array of them. If the array contains more than 2 dates, it will fallback to the first one in the array.

format string (default 'mediumDate'): a date format string as used in Angular's formatDate method. If the format doesn't display the day, but the month and year are the same, it will only display the end date.

locale localestring (default the app's locale, e.g en-US): specify the locale when wanting to display one different from that of the app's. Current locale support: en, fr, ru.

Feel free to fork/fire up Pull Requests! Before you do though, make sure it's:

• passing tests: ng test
• covered by tests: npm run test:lib-coverage
• passing the linter: ng lint

Anything missing/wrong? Please submit an issue 👍

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.