ngx-date-fns-tz

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


Installation

``bash
npm 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:

`typescript
import { provideDateFnsTz } from 'ngx-date-fns-tz';

// In your app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideDateFnsTz(),
// other providers...
]
};
`

Available Pipes

$3

Convert UTC dates to a specific timezone:

`html



{{ utcDate | utcToZonedTime:'America/New_York' }}




{{ utcDate | utcToZonedTimePure:'America/New_York' }}


`

$3

Convert timezone-specific dates to UTC:

`html



{{ zonedDate | dfnsZonedTimeToUtc:'America/New_York' }}




{{ zonedDate | dfnsZonedTimeToUtcPure:'America/New_York' }}


`

$3

Format dates in a specific timezone:

`html



{{ date | dfnsFormatInTimeZone:'America/New_York':'yyyy-MM-dd HH:mm:ss zzz' }}




{{ date | dfnsFormatInTimeZonePure:'America/New_York':'yyyy-MM-dd HH:mm:ss zzz' }}


`

$3

Get the offset for a specific timezone:

`html


Offset: {{ 'America/New_York' | dfnsGetTimeZoneOffset }}


`

Configuration

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

`typescript
import { DateFnsTzConfigurationService } from 'ngx-date-fns-tz';
import { fr } from 'date-fns/locale';

@Component({...})
export class AppComponent {
constructor(private dateFnsTzConfig: DateFnsTzConfigurationService) {
// Set default timezone
this.dateFnsTzConfig.timeZone = 'Europe/Paris';

// Set default format
this.dateFnsTzConfig.format = 'dd/MM/yyyy HH:mm:ss zzz';

// Set default locale
this.dateFnsTzConfig.locale = fr;
}
}
`

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