A simple Angular module to create a timezone selector using moment-timezones.
- 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>
To install this library, run:
$ npm install ng2-timezone-selector --saveThe library depent on jQuery and select2 and moment-timezone
The only file required is the select2 select2.min.css file:
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"
],
...
}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';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>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 { }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;
}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.
MIT © Samuel Nygaard