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:
$ npm install ng2-timezone-selector --saveRequirements (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):
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:
;3. Method (HTML-link)
Include the css resource from a CDN link in the index.html file:
... ...Importing
Import the module in app.module.ts:
;; ; // Import the library; 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: --><!-- You can now use the library component in app.component.html or with single-binding and a change function -->// Example of usage in app.component.ts:user =;placeholderString = 'Select timezone'; changeTimezonetimezone 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 totrueand if thetimezoneparameters isnullorundefinedthen 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 ofcountryIsoCodeto 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$eventparameter is the timezone string.countryChange: function($event: string)- Trigger-function when timezone is changed, the$eventparameter is the country iso-code.
License
MIT © Samuel Nygaard