search

deepu105 / angular-clock

angular clock widget directive: Demo-
http://deepu105.github.io/angular-clock/
64 stars 43 forks source link

Difference between analog and digital #7

Closed tkoseoglu closed 7 years ago

tkoseoglu commented 8 years ago

Hi, Just started working with your custom directive. When setting a custom GMT value, the digital value updates correctly, the analog however does now. Any ideas what could be causing this?

Thanks in advance. Tolga

tkoseoglu commented 8 years ago

Hi, I was able to fix the issue using the momentjs library. Here is the corrected code: function timeText(d, format, timezone, $filter) { //var returnValue = $filter('date')(d.date, format, timezone); var returnValue = moment().utcOffset(parseInt(timezone)).format("HH:mm:ss"); console.log(returnValue); return returnValue; }

deepu105 commented 8 years ago

Thanks, ill take a look On 29 Mar 2016 09:41, "Kemal Tolga Koseoglu" notifications@github.com wrote:

Hi, I was able to fix the issue using the momentjs library. Here is the corrected code: function timeText(d, format, timezone, $filter) { //var returnValue = $filter('date')(d.date, format, timezone); var returnValue = moment().utcOffset(parseInt(timezone)).format("HH:mm:ss"); console.log(returnValue); return returnValue; }

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/deepu105/angular-clock/issues/7#issuecomment-202658646

mattlewi commented 8 years ago

fwiw, it seems to be happening most often for me where gmt-offset is a negative number. i.e. San Francisco with gmt-offset="-7". Analog clock looks good, digital is three hours behind.

Great look on these clocks, btw!

deepu105 commented 8 years ago

Can someone do a PR?

deepu105 commented 8 years ago

@tkoseoglu @mattlewi I couldnt reproduce this, look at the Clock with Timezone Offset example in the demo http://deepu.js.org/angular-clock/ where its working fine for negative GMT offset values. Are you doing anything differently from the sample? can you show me a code snippet which doesnt work for you?

OlexandrPopov commented 8 years ago

Everything works fine on your demo, but check this sample.

deepu105 commented 8 years ago

Ok so atleast its reproducible let me take a look

deepu105 commented 8 years ago

for ref https://plnkr.co/edit/QWVHdDCJNlIptqYyWnEx?p=preview

tsekityam commented 7 years ago

There is no problem til angularJS v1.3.20, which is used in the demo. If we upgrade the angularJS to v1.4.0, then we can reproduce this issue with demo too.

I will take a look on this issue later today. See if it is a bug in AngularJS or angular-clock

tsekityam commented 7 years ago

I found the root cause of this problem.

https://github.com/deepu105/angular-clock/blob/2f17f8ce514f9db3b899eb76b3f9fe7482d3d14a/angular-clock.js#L149-L175

This function returns couples of values.

hrs, mins and secs is the target values we need. These values are the time in target timezone, and we draw the analog clock with these values. As a result, the analog clock shows correct value.

On the other hand, although date has the target time we needed, however, it is still in our local timezone technically. It is because the Date object we created are set to be our local timezone by default.

After that, we will convert this date value to formatted string using angular builtin filter in each tick function call

https://github.com/deepu105/angular-clock/blob/2f17f8ce514f9db3b899eb76b3f9fe7482d3d14a/angular-clock.js#L55-L64 https://github.com/deepu105/angular-clock/blob/2f17f8ce514f9db3b899eb76b3f9fe7482d3d14a/angular-clock.js#L177-L179

We do not only send the date object, and also the timezone to the filter, which means we wants to perform timezone conversion again. The returned formatted string has wrong time now because we apply the timezone conversion twice.

We show this formatted string with wrong time in digital clock. As a result, we have wrong time in digital clock now.