E-Dub
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:
HTML Code:
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);
});
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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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!
PS...I'm actually using jQuery v1.11.1 if that helps any. :) Thanks!
ASKER
It can also be UTC-5, whichever is easiest
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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&