{"id":15184635,"url":"https://github.com/samuelnygaard/ng2-timezone-selector","last_synced_at":"2025-07-25T21:41:51.175Z","repository":{"id":71709525,"uuid":"96338746","full_name":"samuelnygaard/ng2-timezone-selector","owner":"samuelnygaard","description":"A simple Angular module to create a timezone selector using moment-timezone.","archived":false,"fork":false,"pushed_at":"2020-09-15T06:27:22.000Z","size":3746,"stargazers_count":12,"open_issues_count":16,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-01T01:09:36.084Z","etag":null,"topics":["angular","angular-2","angular2","angular4","angular5","moment","moment-js","moment-timezone","momentjs","timezone","timezone-picker","timezone-selector","timezones"],"latest_commit_sha":null,"homepage":"https://samuelnygaard.github.io/ng2-timezone-selector/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samuelnygaard.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-05T16:17:17.000Z","updated_at":"2022-02-06T15:44:46.000Z","dependencies_parsed_at":"2023-05-22T17:45:25.532Z","dependency_job_id":null,"html_url":"https://github.com/samuelnygaard/ng2-timezone-selector","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelnygaard%2Fng2-timezone-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelnygaard%2Fng2-timezone-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelnygaard%2Fng2-timezone-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelnygaard%2Fng2-timezone-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samuelnygaard","download_url":"https://codeload.github.com/samuelnygaard/ng2-timezone-selector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238408650,"owners_count":19467146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-2","angular2","angular4","angular5","moment","moment-js","moment-timezone","momentjs","timezone","timezone-picker","timezone-selector","timezones"],"created_at":"2024-09-27T17:21:14.588Z","updated_at":"2025-02-12T03:31:25.553Z","avatar_url":"https://github.com/samuelnygaard.png","language":"TypeScript","readme":"# ng2-timezone-selector\n\nA simple Angular module to create a timezone selector using [moment-timezones](https://github.com/moment/moment-timezone).\n\n## [Demo](https://samuelnygaard.github.io/ng2-timezone-selector/) | [Documentation](https://samuelnygaard.github.io/ng2-timezone-selector/docs/)\n\n## New features (0.2.3)\n\n* Guess the timezone based on browser settings, usage:\n  * `\u003cng2-timezone-picker [(timezone)]=\"timezone\" guess=\"true\"\u003e\u003c/ng2-timezone-picker\u003e`\n* Show GMT offset (equivalent with UTC offset), e.g.: `Denmark (GTM+01:00)`, usage:\n  * `\u003cng2-timezone-picker [(timezone)]=\"timezone\" showOffset=\"true\"\u003e\u003c/ng2-timezone-picker\u003e`\n* Select timezone based on country iso code and outputs country iso code based on timezone, usage:\n  * `\u003cng2-timezone-picker [(timezone)]=\"timezone\" [(country)]=\"countryIsoCode\"\u003e\u003c/ng2-timezone-picker\u003e`\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ng2-timezone-selector --save\n```\n\n### Requirements (IMPORTANT, use one of the following methods)\n\nThe library depent on [jQuery](https://github.com/jquery/jquery) and [select2](https://github.com/select2/select2) and [moment-timezone](https://github.com/moment/moment-timezone)\n\nThe only file required is the select2 `select2.min.css` file:\n\n#### 1. Method (should work for all)\n\nInclude the `select2.min.css` file in the `angular-cli.json` file (remember to re-run `ng serve`, after editing `angular-cli.json`):\n\n```json\n{\n  \"project\": {\n    ...\n  },\n  \"apps\": [\n    {\n      ...\n      \"styles\": [\n        \"styles.scss\",\n        \"../node_modules/select2/dist/css/select2.min.css\"\n      ],\n      ...\n    }\n```\n\n#### 2. Method (simplest)\n\nIf 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`:\n\n```scss\n@import '~select2/dist/css/select2.min.css';\n```\n\n#### 3. Method (HTML-link)\n\nInclude the `css` resource from a CDN link in the `index.html` file:\n\n```xml\n\u003chead\u003e\n  ...\n  \u003clink href=\"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css\" rel=\"stylesheet\" /\u003e\n  ...\n\u003c/head\u003e\n```\n\n### Importing\n\nImport the module in `app.module.ts`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import the library\nimport { TimezonePickerModule } from 'ng2-timezone-selector';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    ...,\n    // Include the library in the imports section\n    TimezonePickerModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Usage\n\nOnce the library is imported, you can use the component in your Angular application:\n\n```xml\n\u003c!-- You can now use the library component\n in app.component.html with double-binding: --\u003e\n\u003cng2-timezone-picker\n    [(timezone)]=\"user.timezone\"\n    [placeholder]=\"placeholderString\"\u003e\n\u003c/ng2-timezone-picker\u003e\n```\n\n```xml\n\u003c!-- You can now use the library component in\n app.component.html or with single-binding and a change function  --\u003e\n\u003cng2-timezone-picker\n    [timezone]=\"user.timezone\"\n    (change)=\"changeTimezone($event)\"\n    placeholder=\"Select timezone\"\n    showOffset=\"true\"\n    guess=\"true\"\u003e\n\u003c/ng2-timezone-picker\u003e\n```\n\n```typescript\n// Example of usage in app.component.ts:\nuser = {};\nplaceholderString = 'Select timezone';\n\nchangeTimezone(timezone) {\n  this.user.timezone = timezone;\n}\n```\n\n## Parameters\n\n### Component configuration\n\nYou can configure component with the following input attributes:\n\n* `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.\n* `placeholder: string` - Optional: default = `''`. The placeholder string to show when no timezone is selected.\n* `disabled: boolean` - Optional: default = `false`. Disable the the component.\n* `showOffset: boolean` - Optional: default = `false`. Condition to show GMT offset in the dropdown.\n* `guess: boolean` - Optional: default = `false`. If set to `true` and if the `timezone` parameters is `null` or `undefined` then guesses the users timezone.\n* `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 of `countryIsoCode` to the iso of the country.\n* `allowClear: boolean` - Optional: default = `false`. Enabled you to clear the selection of a timezone.\n\nYou can configure component with the `(change)=\"changeFunction($event)` or `(countryChange)=\"countryIsoCode = $event` output attributes:\n\n* `change: function($event)` - Trigger-function when timezone is selected or changed, the `$event` parameter is the timezone string.\n* `countryChange: function($event: string)` - Trigger-function when timezone is changed, the `$event` parameter is the country iso-code.\n\n## License\n\nMIT © [Samuel Nygaard](mailto:teamnygaard@gmail.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelnygaard%2Fng2-timezone-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuelnygaard%2Fng2-timezone-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelnygaard%2Fng2-timezone-selector/lists"}