@date-fns/tz pipes for Angular
npm install ngx-date-fns-tzAngular pipes for date-fns-tz, providing timezone support for Angular applications.


``bash`
npm install ngx-date-fns-tz date-fns date-fns-tz
- 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+
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...
]
};
`
Convert UTC dates to a specific timezone:
` {{ utcDate | utcToZonedTime:'America/New_York' }}html
{{ 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.This library works in all browsers supported by Angular and date-fns-tz.
MIT