MomentTimezonePicker

Versions

| Angular | Version | |---------|---------| | 17 | 9.x.x | | 16 | 8.x.x | | 15 | 7.x.x | | 14 | 6.x.x | | 13 | 5.x.x | | 12 | 4.x.x | | 11 | 3.x.x | | 10 | 2.x.x | | 8 | 1.x.x | | 7 | 0.x.x |

For older version see OLD_VERSIONS_README.md

Dependencies

For select input @ng-select/ng-select For time core moment-timezone

Getting started

Step 1: Install

NPM

npm i moment-timezone-picker --save

Step 2: Import the MomentTimezonePickerModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MomentTimezonePickerModule } from 'moment-timezone-picker'; //add this

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MomentTimezonePickerModule //add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Add in component html

1) As model

<ng-moment-timezone-picker [(ngModel)]="yourModel">
</ng-moment-timezone-picker>

2) As reactive form

<div [formGroup]="your">
<ng-moment-timezone-picker [formControlName]="'yourControlName'">
</ng-moment-timezone-picker>
</div>

Step 4: Include package theme

In component *.scss or *.sass import theme

@import "~node_modules/moment-timezone-picker/assets/moment-timezone-picker.theme";

Or write own styles :)

Step 5: Configuration

Inputs

| Input | Type | Default | Required | Description | |-------------------------|------------|-------------------|----------|------------------------------------------------------------------------| | [customPlaceholderText] | string | Choose... | no | Allows you to localize the placeholder text. | | [customNotFoundText] | string | No zone found | no | Allows you to localize not found text | | [getUserZone] | boolean | false | no | Allows you to guess user timezone. If true also emits value on init. | | [clearable] | boolean | false | no | Sets that if select can be clearable. | | [virtualScroll] | boolean | true | no | Sets select to use virtual scroll. | | [disabled] | boolean | false | no | Disables the ng-select component | | [config] | object | [Object object] | no | See interface SelectConfig | | [valueTransformFN] | function | undefined | no | See valueTransformFN Type |

Object: TZone

| Field | Type | Example | |-----------|----------|--------------------------| | abbr | string | GMT | | group | string | Europe | | nameValue | string | Europe/London | | timeValue | string | +00:00 | | name | string | Europe/London (+00:00) |

Object: SelectConfig

Default value

config: SelectConfig = {
  hideSelected: false,
  dropdownPosition: 'auto',
  appearance: 'underline',
  clearOnBackspace: true,
  closeOnSelect: true,
  appendTo: null
};

For more info read this topic.

❗NOTE: only some properties will be configurable

valueTransformFN Type

valueTransformFN: (obj: TZone | null) => any;

❗Please note that for backward support we need to pass nameValue, because this field is the most specific to find timezone.

Contributor

• Roman Yanush