Solved

jQuery Clock Customization

Posted on 2015-01-15
7
432 Views
Last Modified: 2015-01-16
I'm using the jQuery clock code from this site and everything works great except I need the clock to always show Eastern Standard Time (GMT-5) instead of pulling the local time from the user's browser. How do I edit this code to function in that way?

Also, currently it displays the date as "Day Date Month Year." How to get it to display as "Day, Month Date, Year"

I'm a novice to jQuery so please provide specific steps/examples. Thank you so much for your help!

jQuery Code:
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year    
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

setInterval( function() {
	// Create a newDate() object and extract the seconds of the current time on the visitor's
	var seconds = new Date().getSeconds();
	// Add a leading zero to seconds value
	$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
	},1000);
	
setInterval( function() {
	// Create a newDate() object and extract the minutes of the current time on the visitor's
	var minutes = new Date().getMinutes();
	// Add a leading zero to the minutes value
	$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
	
setInterval( function() {
	// Create a newDate() object and extract the hours of the current time on the visitor's
	var hours = new Date().getHours();
	// Add a leading zero to the hours value
	$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
	
}); 

Open in new window


HTML Code:
<div class="container">
<div class="clock">
<div id="Date"></div>

<ul class="clock-ul">
    <li class="clock-li" id="hours"> </li>
    <li class="clock-li" id="point">:</li>
    <li class="clock-li" id="min"> </li>
    <li class="clock-li" id="point">:</li>
    <li class="clock-li" id="sec"> </li>
</ul>

</div>
</div>

Open in new window

0
Comment
Question by:E-Dub
7 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
that code is from 4 years ago and is using a very old version (1.6.4) of jquery, so you are likely to run into compatibility issues if you try do do other thing with more modern plugins or code.

There are thousands of jquery clock plugins, and if you do a search it is likely that you will find something that is up to date and with the flexibility that you don't seem to have in this relic.

Cd&
0
 
LVL 8

Assisted Solution

by:Ahmed Merghani
Ahmed Merghani earned 100 total points
Comment Utility
Hi,
To change time to GMT, at jQuery Code change line number 11:
var newDate = new Date().toUTCString();

Open in new window

For the second part of your question, at jQuery Code change the line number 11:
$('#Date').html(dayNames[newDate.getDay()] + ", " + monthNames[newDate.getMonth()] + '  ' + newDate.getDate() + ' ,'  + newDate.getFullYear());

Open in new window

0
 
LVL 1

Author Comment

by:E-Dub
Comment Utility
Thanks @ahmed! Ok the second portion worked perfectly, but you said to change line 11 in the first portion as well and I'm wondering if that's a mistake and you meant another line because it didn't work. Also, I would like it to reflect GMT-5 only.

PS...I'm actually using jQuery v1.11.1 if that helps any. :)  Thanks!
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:E-Dub
Comment Utility
It can also be UTC-5, whichever is easiest
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 400 total points
Comment Utility
Hi,
this should do the trick:
setInterval( function() {
    // Define the tomezones offset
    var timezoneOffset = -5;
	// Get the local date from client
    var currentDate = new Date();
    // Get UTC time
    utcDate = currentDate.getTime() + (currentDate.getTimezoneOffset() * 60000);
    // Set to UTC - 5
    estDate = new Date(utcDate + (3600000*timezoneOffset));
	var seconds = estDate.getSeconds();
    var minutes = estDate.getMinutes();
    var hours = estDate.getHours();
    
	// Add a leading zero to seconds value
	$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
	// Add a leading zero to the minutes value
	$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    // Add a leading zero to the hours value
    $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
	},1000);

Open in new window

First I made the script simplier as only one setInterval is used to update all three clocks.
Then the logic is:
Get Local Time -> Get UTC From there -> Add Timezone Offset
Working sample (without styling):
http://jsfiddle.net/EE_RainerJ/umcka2th/
HTH
Rainer
0
 
LVL 1

Author Closing Comment

by:E-Dub
Comment Utility
Thank you guys so much for your help!!
0
 
LVL 8

Expert Comment

by:Ahmed Merghani
Comment Utility
Sorry, yes it is a mistake. For the GMT or UTC part, it is line number 7 not 11.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now