ng2-timezone-selector
Based on ng2-timezone-selector from Samuel Nygaard. New features:
- moved offset calculation into Service in order to convert picked timezones to offsets
- changed GMT to UTC
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 --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
):
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 totrue
and if thetimezone
parameters isnull
orundefined
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 ofcountryIsoCode
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