Dates

dateRange

Formats ordered Date, epoch-millisecond or parseable string endpoints.

Use it in your component

Standalone component

import { Component } from '@angular/core';
import { DateRangePipe } from 'extra-pipe';

@Component({
  standalone: true,
  imports: [DateRangePipe],
  template: `{{ start | dateRange: end: {dateStyle: 'medium', timeZone: 'UTC'}: 'fr' }}`,
})
export class ExampleComponent {
readonly start = new Date('2026-01-01T12:00:00Z');
  readonly end = new Date('2026-01-02T12:00:00Z');
}

Template

{{ start | dateRange: end: {dateStyle: 'medium', timeZone: 'UTC'}: 'fr' }}

Try it live.

The output below runs the packed library. Edit data, not code.

Input (JSON)Use double quotes for text, or a number, array, object or null.

Parameters (JSON array)Ordered parameters: end, options. Locale is controlled separately.

Output localeApplied to the live output.

Live template data

readonly value = "2026-03-08T06:30:00Z";
readonly parameter0 = "2026-03-08T07:30:00Z";
readonly parameter1 = {"timeZone":"America/New_York","hour":"numeric","minute":"numeric"} as const;
{{ value | dateRange: parameter0: parameter1: "en-US" }}

Rendered output

1:30 – 3:30 AM