Difference between analog and digital

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

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; }

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
#7 (comment)

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!

Can someone do a PR?

@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?

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

Ok so atleast its reproducible let me take a look

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

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

I found the root cause of this problem.

angular-clock/angular-clock.js

Lines 149 to 175 in 2f17f8c

    
             function getDate(o) { 
        
               var now = (!isNaN(o.startTime)) ? new Date(o.startTime) : new Date(); 
        
               if (o.gmtOffset !== null && o.gmtOffset !== false) { 
        
                 /*Use GMT + gmtOffset 
        
                 convert to msec 
        
                 add local time zone offset 
        
                 get UTC time in msec*/ 
        
                 var utc = now.getTime() + (now.getTimezoneOffset() * 60000); 
        
                 // create new Date object for different city 
        
                 // using supplied offset 
        
                 var offsetNow = new Date(utc + (3600000 * o.gmtOffset)); 
        
                 return { 
        
                   hrs: offsetNow.getHours(), 
        
                   mins: offsetNow.getMinutes(), 
        
                   secs: offsetNow.getSeconds(), 
        
                   date: offsetNow 
        
                 }; 
        
               } else { 
        
                 // Use local time 
        
                 return { 
        
                   hrs: now.getHours(), 
        
                   mins: now.getMinutes(), 
        
                   secs: now.getSeconds(), 
        
                   date: now 
        
                 }; 
        
               } 
        
             }

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

angular-clock/angular-clock.js

Lines 55 to 64 in 2f17f8c

    
           var tick = function() { 
        
             if (!isNaN(o.startTime)) { 
        
               o.startTime = o.startTime + 1000; 
        
             } 
        
             date = getDate(o); 
        
             scope.date = date; 
        
             if (o.showDigital) { 
        
               scope.digital = timeText(date, digitalFormat, gmtOffset, $filter); 
        
             } 
        
           };

angular-clock/angular-clock.js

Lines 177 to 179 in 2f17f8c

    
           function timeText(d, format, timezone, $filter) { 
        
             return $filter('date')(d.date, format, timezone); 
        
           }

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.

	function getDate(o) {
	var now = (!isNaN(o.startTime)) ? new Date(o.startTime) : new Date();
	if (o.gmtOffset !== null && o.gmtOffset !== false) {
	/*Use GMT + gmtOffset
	convert to msec
	add local time zone offset
	get UTC time in msec*/
	var utc = now.getTime() + (now.getTimezoneOffset() * 60000);
	// create new Date object for different city
	// using supplied offset
	var offsetNow = new Date(utc + (3600000 * o.gmtOffset));
	return {
	hrs: offsetNow.getHours(),
	mins: offsetNow.getMinutes(),
	secs: offsetNow.getSeconds(),
	date: offsetNow
	};
	} else {
	// Use local time
	return {
	hrs: now.getHours(),
	mins: now.getMinutes(),
	secs: now.getSeconds(),
	date: now
	};
	}
	}

	var tick = function() {
	if (!isNaN(o.startTime)) {
	o.startTime = o.startTime + 1000;
	}
	date = getDate(o);
	scope.date = date;
	if (o.showDigital) {
	scope.digital = timeText(date, digitalFormat, gmtOffset, $filter);
	}
	};

	function timeText(d, format, timezone, $filter) {
	return $filter('date')(d.date, format, timezone);
	}