Link to home
Start Free TrialLog in
Avatar of E-Dub
E-DubFlag for United States of America

asked on

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

Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

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&
SOLUTION
Avatar of Ahmed Merghani
Ahmed Merghani
Flag of Sudan image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of E-Dub

ASKER

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!
Avatar of E-Dub

ASKER

It can also be UTC-5, whichever is easiest
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of E-Dub

ASKER

Thank you guys so much for your help!!
Sorry, yes it is a mistake. For the GMT or UTC part, it is line number 7 not 11.