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.
