Angular Material timezone select component with UTC offset navigation
npm install @softwarity/timezone-selectAn 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.
- 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
``bash`
npm install @softwarity/timezone-select
| Package | Version |
|---------|---------|
| @angular/common | >= 21.0.0 |
| @angular/core | >= 21.0.0 |
| @angular/cdk | >= 21.0.0 |
| @angular/material | >= 21.0.0 |
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:
`
})
export class MyComponent {
timezoneControl = new FormControl('Europe/Paris');
}
timezone-select
| 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 |
| Output | Type | Description |
|--------|------|-------------|
| valueChange | EventEmitter | Emits when the selected timezone changes |
The component value is an IANA timezone name string (e.g., 'Europe/Paris', 'America/New_York', 'UTC').
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();
}
`
`typescript
import { TimezoneSelectComponent } from '@softwarity/timezone-select';
@Component({
imports: [TimezoneSelectComponent, MatFormFieldModule, ReactiveFormsModule],
template:
`
})
export class MyComponent {
control = new FormControl('UTC');
}
`typescript
@Component({
template:
(valueChange)="onTimezoneChange($event)" />
})
export class MyComponent {
control = new FormControl('America/New_York');
onTimezoneChange(timezone: string | null): void {
console.log('Selected timezone:', timezone);
}
}
`
`typescript
@Component({
template:
`
})
export class MyComponent {
control = new FormControl({ value: 'Europe/London', disabled: true });
}
The component uses the native JavaScript Intl API to:Intl.supportedValuesOf('timeZone')
- Get the list of supported timezones: Intl.DateTimeFormat
- Calculate UTC offsets: with timeZoneName: 'shortOffset'`
This ensures the timezone data is always up-to-date with the browser's IANA timezone database.
MIT