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:

Installation:

$ npm install ng2-timezone-selector --save

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

{
  "project": {
    ...
  },
  "apps": [
    {
      ...
      "styles": [
        "styles.scss",
        "../node_modules/select2/dist/css/select2.min.css"
      ],
      ...
    }

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

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

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ...,
    // Include the library in the imports section
    TimezonePickerModule
  ],
  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: -->
<ng2-timezone-picker
    [(timezone)]="user.timezone"
    [placeholder]="placeholderString">
</ng2-timezone-picker>

<!-- You can now use the library component in
 app.component.html or with single-binding and a change function  -->
<ng2-timezone-picker
    [timezone]="user.timezone"
    (change)="changeTimezone($event)"
    placeholder="Select timezone"
    showOffset="true"
    guess="true">
</ng2-timezone-picker>

// 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