• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 654
  • Last Modified:

jQuery Clock Customization

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
E-Dub
Asked:
E-Dub
2 Solutions
 
COBOLdinosaurCommented:
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
 
Ahmed MerghaniSoftware EngineerCommented:
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
 
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
It can also be UTC-5, whichever is easiest
0
 
Rainer JeschorCommented:
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
 
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
Thank you guys so much for your help!!
0
 
Ahmed MerghaniSoftware EngineerCommented:
Sorry, yes it is a mistake. For the GMT or UTC part, it is line number 7 not 11.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now