A simple Angular module to create a timezone selector using moment-timezones.

Demo | Documentation

New features (0.2.3)

  • Guess the timezone based on browser settings, usage:
    • <ng2-timezone-picker [(timezone)]="timezone" guess="true"></ng2-timezone-picker>
  • Show GMT offset (equivalent with UTC offset), e.g.: Denmark (GTM+01:00), usage:
    • <ng2-timezone-picker [(timezone)]="timezone" showOffset="true"></ng2-timezone-picker>
  • Select timezone based on country iso code and outputs country iso code based on timezone, usage:
    • <ng2-timezone-picker [(timezone)]="timezone" [(country)]="countryIsoCode"></ng2-timezone-picker>


To install this library, run:

$ npm install ng2-timezone-selector --save

Requirements (IMPORTANT, use one of the following methods)

The library depent on jQuery and select2 and moment-timezone

The only file required is the select2 select2.min.css file:

1. Method (should work for all)

Include the select2.min.css file in the angular-cli.json file (remember to re-run ng serve, after editing angular-cli.json):

  "project": {
  "apps": [
      "styles": [

2. Method (simplest)

If the angular project is setup to use *.scss instead of *.css, then you can add the following @import to the default *.scss file, othen called: styles.scss:

@import '~select2/dist/css/select2.min.css';

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

  <link href="" rel="stylesheet" />


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 { }


Once the library is imported, you can use the component in your Angular application:

<!-- 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;


Component configuration

You can configure component with the following input attributes:

  • timezone: string - Required: must be defined. The timezone string. If you are using the Two-Way Data Binding [(timezone)]="timezoneString" it will change on selection of timezone.
  • placeholder: string - Optional: default = ''. The placeholder string to show when no timezone is selected.
  • disabled: boolean - Optional: default = false. Disable the the component.
  • showOffset: boolean - Optional: default = false. Condition to show GMT offset in the dropdown.
  • guess: boolean - Optional: default = false. If set to true and if the timezone parameters is null or undefined then guesses the users timezone.
  • country: string - Optional. The country iso-string (e.g. 'US' / 'GB' / 'AU'). If you are using the Two-Way Data Binding e.g.: [(country)]="countryIsoCode" it will change the timezone to the provided iso-code (if the iso code is valid), and if the timezone is changed it changes the value of countryIsoCode to the iso of the country.
  • allowClear: boolean - Optional: default = false. Enabled you to clear the selection of a timezone.

You can configure component with the (change)="changeFunction($event) or (countryChange)="countryIsoCode = $event output attributes:

  • change: function($event) - Trigger-function when timezone is selected or changed, the $event parameter is the timezone string.
  • countryChange: function($event: string) - Trigger-function when timezone is changed, the $event parameter is the country iso-code.


MIT © Samuel Nygaard

results matching ""

    No results matching ""