A Simple Angular Module To Create A Timezone Selector Using Moment-Timezone

ng2-timezone-selector is a simple Angular module for creating a timezone selector using moment-timezones.

angular material timezone picker, ng2 timezone selector, material ui timezone picker, moment timezone picker, timezone picker react, moment timezone picker example

How to make use of it:


$ npm install ng2-timezone-selector --save

1. The only file needed is the select2 select2.min.css file:

  "project": {
  "apps": [
      "styles": [
@import '~select2/dist/css/select2.min.css';

2. Include the css resource from the CDN link in the index.html file:

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

3. Import the module in app.module.ts:

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

import { AppComponent } from './app.component';

// Import the library
import { TimezonePickerModule } from 'ng2-timezone-selector';

  declarations: [
  imports: [
    // Include the library in the imports section
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

4. Once the library is imported, you can use the component in your Angular app:

<!-- You can now use the library component
 in app.component.html with double-binding: -->
<!-- You can now use the library component in
 app.component.html or with single-binding and a change function  -->
    placeholder="Select timezone"
// Example of usage in app.component.ts:
user = {};
placeholderString = 'Select timezone';

changeTimezone(timezone) {
  this.user.timezone = timezone;

timezone selector for angular, ng2-timezone-selector, handling timezone in angular

See Demo And Download

Official Website(samuelnygaard): Click Here

This superior jQuery/javascript plugin is developed by samuelnygaard. For extra advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…