Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

jQuery Clock Customization

Posted on 2015-01-15
7
Medium Priority
?
619 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
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 400 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 3

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
Technology Partners: 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!

 
LVL 3

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 1600 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 3

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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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)
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…
Suggested Courses
Course of the Month14 days, 23 hours left to enroll

577 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