moment-timezone-picker v9.0.0

MomentTimezonePicker

Versions

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

Object: TZone

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