ngx-date-fns-tz

Angular pipes for date-fns-tz, providing timezone support for Angular applications.

Installation

1npm install ngx-date-fns-tz date-fns date-fns-tz

Features

• Convert between UTC and timezone-specific dates
• Format dates in specific timezones
• Get timezone offsets
• Both pure and impure pipes for different use cases
• Standalone components compatible with Angular 18+

Setup

Import the provider in your app module or standalone component:

1import { provideDateFnsTz } from 'ngx-date-fns-tz';
2
3// In your app.config.ts
4export const appConfig: ApplicationConfig = {
5  providers: [
6    provideDateFnsTz(),
7    // other providers...
8  ]
9};

Available Pipes

UTC to Zoned Time

Convert UTC dates to a specific timezone:

1<!-- Impure pipe (updates on timezone changes) -->
2<p>{{ utcDate | utcToZonedTime:'America/New_York' }}</p>
3
4<!-- Pure pipe (only updates when inputs change) -->
5<p>{{ utcDate | utcToZonedTimePure:'America/New_York' }}</p>

Zoned Time to UTC

Convert timezone-specific dates to UTC:

1<!-- Impure pipe -->
2<p>{{ zonedDate | dfnsZonedTimeToUtc:'America/New_York' }}</p>
3
4<!-- Pure pipe -->
5<p>{{ zonedDate | dfnsZonedTimeToUtcPure:'America/New_York' }}</p>

Format in Time Zone

Format dates in a specific timezone:

1<!-- Impure pipe -->
2<p>{{ date | dfnsFormatInTimeZone:'America/New_York':'yyyy-MM-dd HH:mm:ss zzz' }}</p>
3
4<!-- Pure pipe -->
5<p>{{ date | dfnsFormatInTimeZonePure:'America/New_York':'yyyy-MM-dd HH:mm:ss zzz' }}</p>

Get Time Zone Offset

Get the offset for a specific timezone:

1<p>Offset: {{ 'America/New_York' | dfnsGetTimeZoneOffset }}</p>

Configuration

You can configure default timezone, format, and locale using the DateFnsTzConfigurationService:

1import { DateFnsTzConfigurationService } from 'ngx-date-fns-tz';
2import { fr } from 'date-fns/locale';
3
4@Component({...})
5export class AppComponent {
6  constructor(private dateFnsTzConfig: DateFnsTzConfigurationService) {
7    // Set default timezone
8    this.dateFnsTzConfig.timeZone = 'Europe/Paris';
9    
10    // Set default format
11    this.dateFnsTzConfig.format = 'dd/MM/yyyy HH:mm:ss zzz';
12    
13    // Set default locale
14    this.dateFnsTzConfig.locale = fr;
15  }
16}

Pure vs Impure Pipes

• Impure pipes (utcToZonedTime, dfnsZonedTimeToUtc, dfnsFormatInTimeZone): Update automatically when the configuration service changes.
• Pure pipes (utcToZonedTimePure, dfnsZonedTimeToUtcPure, dfnsFormatInTimeZonePure): Only update when their inputs change, more efficient for performance.

Browser Support

This library works in all browsers supported by Angular and date-fns-tz.

License

MIT