ng2-timezone-selector is a simple Angular module for creating a timezone selector using moment-timezones.
angular material timezone picker, ng2 timezone selector, material ui timezone picker, moment timezone picker, timezone picker react, moment timezone picker example
How to make use of it:
Installation:
$ npm install ng2-timezone-selector --save
1. The only file needed is the select2 select2.min.css file:
{ "project": { ... }, "apps": [ { ... "styles": [ "styles.scss", "../node_modules/select2/dist/css/select2.min.css" ], ... }
@import '~select2/dist/css/select2.min.css';
2. Include the css resource from the 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>
3. 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 { }
4. Once the library is imported, you can use the component in your Angular app:
<!-- 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; }
timezone selector for angular, ng2-timezone-selector, handling timezone in angular
See Demo And Download
Official Website(samuelnygaard): Click Here
This superior jQuery/javascript plugin is developed by samuelnygaard. For extra advanced usage, please go to the official website.