moment-timezone-picker

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