@softwarity/timezone-select

An Angular Material timezone selector component with UTC offset navigation. Browse timezones by offset using arrow buttons, then select a specific timezone from the filtered dropdown.

Live Demo

Features

- UTC Offset Navigation - Browse timezones by offset with < +00:00 > arrows (infinite loop)
- Browser Timezone Detection - Optional button to auto-detect and set browser timezone
- IANA Timezone Names - Uses native Intl.supportedValuesOf('timeZone') for timezone data
- MatFormField Compatible - Implements MatFormFieldControl for seamless integration
- Reactive Forms Support - Implements ControlValueAccessor for use with Angular forms
- Material 3 Ready - Uses M3 design tokens for theming
- Standalone Component - Easy to import in any Angular 21+ application
- No Dependencies - Uses native JavaScript Intl API for timezone data

Installation

``bash
npm install @softwarity/timezone-select
`

$3

| Package | Version |
|---------|---------|
| @angular/common | >= 21.0.0 |
| @angular/core | >= 21.0.0 |
| @angular/cdk | >= 21.0.0 |
| @angular/material | >= 21.0.0 |

Usage

Import the component in your Angular component:

`typescript
import { TimezoneSelectComponent } from '@softwarity/timezone-select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { ReactiveFormsModule, FormControl } from '@angular/forms';

@Component({
selector: 'app-my-component',
imports: [TimezoneSelectComponent, MatFormFieldModule, ReactiveFormsModule],
template:

Timezone

Select your preferred timezone


})
export class MyComponent {
timezoneControl = new FormControl('Europe/Paris');
}
`

API

$3

timezone-select

$3

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| placeholder | string | '' | Placeholder text |
| required | boolean | false | Whether the field is required |
| disabled | boolean | false | Whether the field is disabled |
| showDetectButton | boolean | false | Shows a button to detect and set browser timezone |

$3

| Output | Type | Description |
|--------|------|-------------|
| valueChange | EventEmitter | Emits when the selected timezone changes |

$3

The component value is an IANA timezone name string (e.g., 'Europe/Paris', 'America/New_York', 'UTC').

Theming (Material 3)

The component provides a SCSS mixin for theming. Import and use it in your styles.scss:

`scss
@use '@angular/material' as mat;
@use '@softwarity/timezone-select/timezone-select-theme' as timezone-select;

html {
@include mat.theme((color: (primary: mat.$violet-palette)));

// Apply timezone-select theme
@include timezone-select.theme();
}
`

Examples

$3

`typescript
import { TimezoneSelectComponent } from '@softwarity/timezone-select';

@Component({
imports: [TimezoneSelectComponent, MatFormFieldModule, ReactiveFormsModule],
template:

Timezone



})
export class MyComponent {
control = new FormControl('UTC');
}
`

$3

`typescript
@Component({
template:

Timezone
[formControl]="control"
(valueChange)="onTimezoneChange($event)" />


})
export class MyComponent {
control = new FormControl('America/New_York');

onTimezoneChange(timezone: string | null): void {
console.log('Selected timezone:', timezone);
}
}
`

$3

`typescript
@Component({
template:

Timezone



})
export class MyComponent {
control = new FormControl({ value: 'Europe/London', disabled: true });
}
`

Timezone Data

The component uses the native JavaScript Intl API to:
- Get the list of supported timezones: Intl.supportedValuesOf('timeZone')
- Calculate UTC offsets: Intl.DateTimeFormat with timeZoneName: 'shortOffset'`

This ensures the timezone data is always up-to-date with the browser's IANA timezone database.

License

MIT