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>

Installation

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": [
        "styles.scss",
        "../node_modules/select2/dist/css/select2.min.css"
      ],
      ...
    }

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

3. Method (HTML-link)

Include the css resource from a 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>

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 'ng2-timezone-selector';

@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: -->
<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;
}

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.

License

Keywords

FAQs

What is ng2-timezone-selector?

Is ng2-timezone-selector popular?

Is ng2-timezone-selector well maintained?

Package last updated on 17 Apr 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install