ng-select-timezone-search

Based on samuelnygaard's ng2-timezone-selector with slight modifications to work with Angular 9 and support for a theme.

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

Demo | Documentation

Installation

To install this library, run:

$ npm install ng-select-timezone-search --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": [
        "styles.scss",
        "node_modules/select2/dist/css/select2.min.css"
        ],
        "scripts": [
            "node_modules/jquery/dist/jquery.js",
            "node_modules/select2/dist/js/select2.min.js"
        ]
      ...
    }

Importing

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 'ng-select-timezone-search';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ...,
    // Include the library in the imports section
    TimezonePickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

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: -->
<ng-select-timezone-search
    [(timezone)]="user.timezone"
    [placeholder]="placeholderString">
</ng-select-timezone-search>

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

// Example of usage in app.component.ts:
user = {};
placeholderString = 'Select timezone';

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

Parameters

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.
• theme - Optional: default = default. Set the Select2 theme

Original License

MIT © Samuel Nygaard