moment-timezone-picker

A simple angular moment timezone picker

Usage no npm install needed!

<script type="module">
  import momentTimezonePicker from 'https://cdn.skypack.dev/moment-timezone-picker';
</script>

README

MomentTimezonePicker

NPM

npm version

Versions

Angular Version
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

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

Contributor