ngx-moment-timezone-picker v0.0.2

NgxMomentTimezonePicker

Versions

For older version see moment-timezone-picker

Dependencies

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

Note

Take care this is a temporary package based on moment-timezone-picker from Roman Yanush, for use in angular version 12. When the original package is upgraded on location this one will be depricated and then deleted!

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 'ngx-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

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

2) As reactive form

<div [formGroup]="your">
<ngx-moment-timezone-picker [formControlName]="'yourControlName'">
</ngx-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