samuelnygaard / ng2-timezone-selector Goto Github PK

Does the selector changes automatically the offset considering che daylight saving changes?

I get the below error in console and the dropdown is empty

Asia/Calcutta
main.b3024e6c930273b7d557.bundle.js:1 ERROR TypeError: Cannot read property 'iso' of undefined
    at e.triggerChangeEvent (main.b3024e6c930273b7d557.bundle.js:1)
    at e.set [as timezone] (main.b3024e6c930273b7d557.bundle.js:1)
    at Li (main.b3024e6c930273b7d557.bundle.js:1)
    at main.b3024e6c930273b7d557.bundle.js:1
    at main.b3024e6c930273b7d557.bundle.js:1
    at Ki (main.b3024e6c930273b7d557.bundle.js:1)
    at La (main.b3024e6c930273b7d557.bundle.js:1)
    at Object.updateDirectives (main.b3024e6c930273b7d557.bundle.js:1)
    at Object.updateDirectives (main.b3024e6c930273b7d557.bundle.js:1)
    at $i (main.b3024e6c930273b7d557.bundle.js:1)```

I am trying to use this library in an reactive form.

Do you have any examples of such implementation?

Hi Samuel,

I followed the installation instructions, but I keep getting this error:

selectElement.select2 is not a function
  at TimezonePickerComponent.ngAfterViewInit

You mentioned that the only file needed for the timezone selector to work is the select2 CSS file, which I imported. But it looks like this plugin has trouble finding the select2 function.

I'm using Angular 5 and I installed the select2 npm library to node_modules.

Please tell me if there's something I'm missing.

Thanks!

Using this selector in an angular 5 project gives the following warning:

npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none is installed

Firstly, thanks for a great library

I tried upgrading my angular 6 app to angular 7 and got the following error
Package "ng2-timezone-selector" has an incompatible peer dependency to "rxjs" (requires "^5.1.0", would install "6.3.3").
Package "ng2-timezone-selector" has an incompatible peer dependency to "@angular/core" (requires ">=6.0.0-rc.0 <7.0.0||>=4.0.0 <5.0.0||>=5.0.0 <6.0.0", would install "7.0.2").
Incompatible peer dependencies found. See above.

Do you plan on supporting angular 7? thanks

Project Package JSON:
{
"name": "abc",
"description": "",
"homepage": ",
"dependencies": {
"@angular/animations": "4.3.6",
"@angular/cdk": "2.0.0-beta.8",
"@angular/common": "4.3.6",
"@angular/compiler": "4.3.6",
"@angular/core": "4.3.6",
"@angular/forms": "4.3.6",
"@angular/http": "4.3.6",
"@angular/material": "2.0.0-beta.8",
"@angular/platform-browser": "4.3.6",
"@angular/platform-browser-dynamic": "4.3.6",
"@angular/router": "4.3.6",
"@ngx-translate/core": "^7.2.2",
"@ngx-translate/http-loader": "^2.0.1",
"@types/html2canvas": "0.0.33",
"@types/jquery": "3.3.2",
"angular-datatables": "4.4.0",
"angular-hammer": "2.2.0",
"angular2-font-awesome": "1.3.0",
"angular2-text-mask": "9.0.0",
"angular2-tinymce": "3.0.0",
"bootstrap": "^3.3.7",
"chart.js": "2.7.2",
"classlist.js": "1.1.20150312",
"core-js": "2.5.7",
"datatables.net": "1.10.16",
"datatables.net-dt": "1.10.16",
"datatables.net-responsive": "^2.2.1",
"datatables.net-responsive-dt": "^2.2.1",
"file-saver": "1.3.8",
"font-awesome": "4.7.0",
"fontawesome": "4.7.2",
"hammerjs": "2.0.8",
"html2canvas": "^1.0.0-alpha.12",
"jquery": "3.3.1",
"jspdf": "^1.4.1",
"material-design-icons": "3.0.1",
"material-design-lite": "1.3.0",
"material-modal": "0.1.3",
"mydatepicker": "2.6.5",
"ng2-charts": "1.6.0",
"ng2-device-detector": "^1.0.1",
"ng2-timezone-selector": "0.2.4",
"popper.js": "1.14.3",
"primeng": "4.1.0",
"primeng-datatable-extensions": "0.0.2",
"quill": "1.2.6",
"rxjs": "5.4.2",
"sweetalert2": "7.22.2",
"tinymce": "4.7.13",
"web-animations-js": "2.3.1",
"zone.js": "0.8.12"
},
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
},
"private": true,
"devDependencies": {
"@angular/cli": "1.6.7",
"@angular/compiler-cli": "4.3.6",
"@biesbjerg/ngx-translate-extract": "^2.3.4",
"@types/datatables.net": "1.10.11",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "2.3.4",
"@types/jspdf": "^1.1.31"
}
}

Compile error:

ERROR in Error: Metadata version mismatch for module D:/abc/node_modules/ng2-timezone-selector/ng2-timezone-selector.d.ts, found version 4, expected 3, resolving symbol AppModule in D:/abc/src/app/app.module.ts, resolving symbol AppModule in D:/abc/src/app/app.module.ts
at syntaxError (D:\abc\node_modules@angular\compiler\bundles\compiler.umd.js:1725:34)
at simplifyInContext (D:\abc\node_modules@angular\compiler\bundles\compiler.umd.js:24949:23)
at StaticReflector.simplify (D:\abc\node_modules@angular\compiler\bundles\compiler.umd.js:24961:13)
at StaticReflector.annotations (D:\abc\node_modules@angular\compiler\bundles\compiler.umd.js:24391:41)
at _getNgModuleMetadata (D:\abc\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (D:\abc\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (D:\abc\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\abc\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (D:\abc\node_modules@ngtools\webpack\src\plugin.js:240:66)
at _donePromise.Promise.resolve.then.then.then.then.then (D:\abc\node_modules@ngtools\webpack\src\plugin.js:493:24)
at process._tickCallback (internal/process/next_tick.js:109:7)

Hi, I can working fine with Angular 7.
But after trigger the select dropdown, it keep showing, unable to close it.

Only found below warning in inspect element.

zone.js:392 Unhandled Promise rejection: Template parse errors:
"let-" is only supported on template elements. ("le="width: 100%" class="form-control" [disabled]="disabled">

<ng-template [ERROR ->]let-c ngFor [ngForOf]="allTimezones">
<optgroup *ngIf="c.zones.length > 1" [label]="c.iso | iso"): TimezonePickerComponent@3:17
'ng-template' is not a known element:

1. If 'ng-template' is an Angular component, then verify that it is part of this module.
2. If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("="select" style="width: 100%" class="form-control" [disabled]="disabled">

Showing this issue when i install and import it.

It would be very useful to be able to get the GMT offset in the model as well (user.timezone in the documentation).
When the showOffset flag is set to true, the GMT offset is shown in dropdown, but after selection only the timezone name is being assigned to the model (user.timezone)....

Hi,

I get this error message:

ERROR TypeError: "this.allTimezones.find(...) is undefined"
triggerChangeEvent http://192.168.0.2:4200/vendor.js:186903:37
set http://192.168.0.2:4200/vendor.js:186834:17
updateProp http://192.168.0.2:4200/vendor.js:83316:5
checkAndUpdateDirectiveInline http://192.168.0.2:4200/vendor.js:83079:19
checkAndUpdateNodeInline http://192.168.0.2:4200/vendor.js:84374:20
checkAndUpdateNode http://192.168.0.2:4200/vendor.js:84336:16
debugCheckAndUpdateNode http://192.168.0.2:4200/vendor.js:84970:19
debugCheckDirectivesFn http://192.168.0.2:4200/vendor.js:84930:13
View_ClockComponent_1 ng:///AppModule/ClockComponent.ngfactory.js:307:5
debugUpdateDirectives http://192.168.0.2:4200/vendor.js:84922:12
checkAndUpdateView http://192.168.0.2:4200/vendor.js:84318:5
callViewAction http://192.168.0.2:4200/vendor.js:84559:21
execEmbeddedViewsAction http://192.168.0.2:4200/vendor.js:84522:17
checkAndUpdateView http://192.168.0.2:4200/vendor.js:84319:5
callViewAction http://192.168.0.2:4200/vendor.js:84559:21
execComponentViewsAction http://192.168.0.2:4200/vendor.js:84501:13
checkAndUpdateView http://192.168.0.2:4200/vendor.js:84324:5
callViewAction http://192.168.0.2:4200/vendor.js:84559:21
execEmbeddedViewsAction http://192.168.0.2:4200/vendor.js:84522:17
checkAndUpdateView http://192.168.0.2:4200/vendor.js:84319:5
callViewAction http://192.168.0.2:4200/vendor.js:84559:21
execEmbeddedViewsAction http://192.168.0.2:4200/vendor.js:84522:17
checkAndUpdateView http://192.168.0.2:4200/vendor.js:84319:5
callViewAction http://192.168.0.2:4200/vendor.js:84559:21
execComponentViewsAction http://192.168.0.2:4200/vendor.js:84501:13
checkAndUpdateView http://192.168.0.2:4200/vendor.js:84324:5
callWithDebugContext http://192.168.0.2:4200/vendor.js:85188:22
debugCheckAndUpdateView http://192.168.0.2:4200/vendor.js:84890:12
detectChanges http://192.168.0.2:4200/vendor.js:82699:13
tick http://192.168.0.2:4200/vendor.js:79130:58
tick http://192.168.0.2:4200/vendor.js:79130:13
next http://192.168.0.2:4200/vendor.js:79021:99
invoke http://192.168.0.2:4200/polyfills.js:3268:17
onInvoke http://192.168.0.2:4200/vendor.js:78398:24
invoke http://192.168.0.2:4200/polyfills.js:3267:17
run http://192.168.0.2:4200/polyfills.js:3018:24
run http://192.168.0.2:4200/vendor.js:78312:16
next http://192.168.0.2:4200/vendor.js:79021:69
schedulerFn http://192.168.0.2:4200/vendor.js:74613:36
__tryOrUnsub http://192.168.0.2:4200/vendor.js:188656:13
next http://192.168.0.2:4200/vendor.js:188594:17
next http://192.168.0.2:4200/vendor.js:188537:9
next http://192.168.0.2:4200/vendor.js:188514:13
next http://192.168.0.2:4200/vendor.js:188279:25
emit http://192.168.0.2:4200/vendor.js:74597:54
checkStable http://192.168.0.2:4200/vendor.js:78367:13
onLeave http://192.168.0.2:4200/vendor.js:78434:5
onInvokeTask http://192.168.0.2:4200/vendor.js:78392:17
invokeTask http://192.168.0.2:4200/polyfills.js:3300:17
runTask http://192.168.0.2:4200/polyfills.js:3068:28
invokeTask http://192.168.0.2:4200/polyfills.js:3376:24
invoke http://192.168.0.2:4200/polyfills.js:3365:28
timer http://192.168.0.2:4200/polyfills.js:4934:17
ClockComponent.html:42:10
View_ClockComponent_1
ClockComponent.html:42:10
./node_modules/@angular/core/fesm5/core.js/DebugContext.prototype.logError
core.js:24041
./node_modules/@angular/core/fesm5/core.js/ErrorHandler.prototype.handleError
core.js:15762
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick/<
core.js:18028:54
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.runOutsideAngular
core.js:17248
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick
core.js:18028
next/<
core.js:17912:97
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
onInvoke
core.js:17289
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:387
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.run
core.js:17203
next
core.js:17912:67
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.subscribe/schedulerFn<
core.js:13504:34
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub
Subscriber.js:196
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.next
Subscriber.js:134
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next
Subscriber.js:77
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next
Subscriber.js:54
./node_modules/rxjs/_esm5/internal/Subject.js/Subject.prototype.next
Subject.js:47
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.emit
core.js:13488:52
checkStable
core.js:17258
onLeave
core.js:17325
onInvokeTask
core.js:17283
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask
zone.js:420
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask
zone.js:188
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask
zone.js:496
ZoneTask/this.invoke
zone.js:485
timer

The module works fine on every other systems, I see this error only on my android phone with Firefox browser. (Desktop Chrome/Firefox OK, phone Chrome OK.)

Could you please help me how can I solve this issue?
Let me know if you need info!

Thanks

As #10 #13 mentioned, there's a problem with guess property being set to true. Now, the problem is not the property itself but the "outdated" timezones list in the source code.

The library depends on moment-timezone for the "guess" functionality but probably not keeping up-to-date with moment-timezone in terms of what moment-timezone returns for its .guess() method. This leads to this line: this.countryChange.emit(this.allTimezones.find(x => x.zones.indexOf(this.currentTimezone) >= 0).iso); errors out as this.allTimezones.find(x => x.zones.indexOf(this.currentTimezone) >= 0).iso is undefined.

Is there any update/suggestion to this?

ng2-timezone-selector is working with me properly in angular 5, but when but it in bootstrap modal its search input doesn't work.

is there a solution for this?

Hello
First off thanks for the lovely module, and especially the auto guess function.

I implmented it under ionic 3 and its working gr8, though the style is kinda of broken - i thought to myself this is a minor easy issue...but hours passed and i'm unable to figure it out.

By moving the <select> (and it style select2-hidden-accessible) out of <ng-2-timezone-picker> its solving the issue.

Perhaps there is a way to edit the html code view?

much appreciated for any hint.

In my project i would like to display UTC instead of GMT for the offset. Maybe an option to choose between them would be good.
What do you think of that?

Is there anyway to sort the timezones listed on basis of offset ?

Something like Asia/Kolkata (GMT+5:30)

Hi,
in the current project I am working in we would like to have the option to choose "Etc/UTC" in the list. As this is something supported by momentjs I think we should considere this.

Thank you in advance for your feedback

Error: This likely means that the library (ng2-timezone-selector) which declares TimezonePickerModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Any chance of updating the component for newer versions of Angular?

In iPad, The drop down scroll not behave is same as android device (not smooth to use in iPad device),please guide me how to fix this.

Hi there,

I am facing the issue when I try to set the default value for timezone or use the property guess=true. It displays the issue as below:


As I checked the source code, the logic of the function triggerChangeEvent has a problem.
this.countryChange.emit(this.allTimezones.find(function (x) { return x.zones.indexOf(_this.currentTimezone) >= 0; }) .iso);
This line of code is not working.
Please check my issue. Thank you. :)