A Simple Angular Module To Create A Timezone Selector Using Moment-Timezone

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.

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *