ng2-timezone-selector

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng2-timezone-selector
12160.2.45 years ago6 years agoMinified + gzip package size for ng2-timezone-selector in KB

Popular Searches

Readme

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

Installation

To install this library, run: ```bash $ 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): ```json { "project": { 
...
}, "apps": 
{
...
"styles": [
"styles.scss",
"../node_modules/select2/dist/css/select2.min.css"
],
...
}
```

  1. 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: ```scss @import '~select2/dist/css/select2.min.css'; ```

  1. Method (HTML-link)

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

Importing

Import the module in app.module.ts: ```typescript 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: ```xml [(timezone)]="user.timezone" 
[placeholder]="placeholderString">
``` ```xml [timezone]="user.timezone" 
(change)="changeTimezone($event)"
placeholder="Select timezone"
showOffset="true"
guess="true">
``` ```typescript // 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

MIT © Samuel Nygaard