Press "Enter" to skip to content

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="" 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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.