Solved

jQuery Clock Customization

Posted on 2015-01-15
7
591 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40551896
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
ID: 40551917
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
ID: 40552521
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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
LVL 1

Author Comment

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

Accepted Solution

by:
Rainer Jeschor earned 400 total points
ID: 40552957
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
ID: 40553236
Thank you guys so much for your help!!
0
 
LVL 8

Expert Comment

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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

733 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