trying to place live date & Time in web page

Question

starengineer 0 Newbie Poster

15 Years Ago

I'm new here and I'm not sure if I'm posting in the right thread. However, Perhaps someone can lead me to the right place. I've developed a web page in Dreamweaver CS3 and save it as a template (so I can add more pages w/ the same overall theme) So, I want to add a live day & date display to my template so it will show up on every page of my site. I went Dynamic Drive website and I saw one called "Live Date Script" which seem perfect for what I'm trying to do. Here is the problem, I followed the instruction but it never works correctly. It said place the codes anywhere in the <body tag> and place this code in side the body <body onLoad="goforit()"> I did that and I still can't get it to display correctly I'm starting to bang my head on the computer screen because it's driven me nut trying to figure this out. Can someone here enlighten me or help me trouble shoot my dilemma?

ui-ux web-design

4 Contributors
15 Replies
245 Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by starengineer

essential 84 Posting Shark

15 Years Ago

Here's a simple Javascript demo that will display time and date, based on the local time in your system.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Livedate Example</title>
<style id="internal" type="text/css">
/* <![CDATA[ */
span#timestamp {
   display : inline-block;
   font : normal normal normal 90%/1.6 Verdana, Arial, sans-serif;
   background-color : #f0f0f0;
   color : #708090;
   white-space : nowrap;
   letter-spacing : 2px;
   padding : .200em .500em .200em .500em;
   border : 1px solid #ccc; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var date;
var month, weekdays, day, year, hour, minute, seconds, ampm;
var livedate;
var showDate;

date = Date.prototype.date = function() {
   month = [ "January ", "February ", "March ", "April ", "May ", "June ", "July ", "August ", "September ", "October ", "November ", "December " ][ this.getMonth() ]; // Month Names
   weekdays = [ "Sunday - ", "Monday - ", "Tuesday - ", "Wednesday - ", "Thursday - ", "Friday - ", "Saturday - " ][ this.getDay() ]; // Weekday

   day = this.getDate();
   day = ((( day < 10 ? "0" : "" ) + day ) + ", " ); // Getting ate of the month.
   year = (( this.getFullYear() ) + " " ); // Current Year
   hour = this.getHours();
   ampm = (( hour >= 12 ) ? "pm" : "am" );
   hour = (( hour >= 13 ) ? hour - 12 : hour );
   hour = (( hour === 0 ) ? 12 : hour );
   hour = (( hour < 10 ? "0" : "" ) + hour );
   minute = this.getMinutes();
   minute = (( minute < 10 ? "0" : "" ) + minute );
   seconds = this.getSeconds();
   seconds = (( seconds < 10 ? "0" : "" ) + seconds );
   return weekdays + month + day + year + hour + ":" + minute + ":" + seconds + ampm.fontcolor("red");
};

showDate = function() {
   today = new Date();
   myDate = today.date();
   return (( document.getElementById ) ? document.getElementById("timestamp").innerHTML = myDate : document.all.timestamp.innerHTML = myDate ); 
};

window.onload = function() {
   livedate = setInterval("showDate()", 1000);
};
// ]]>
</script>
</head>
<body>
<div id="main">
<span id="timestamp"></span>

</div>
</body>
</html>

Hope it helps...

essential 84 Posting Shark

15 Years Ago

We are sorry if we came late with our responses...
There are also many other languages that can display dates like ( PHP, VBscript, ASP, etc.) -- but since my line is in javascript, so my preferred example comes in this format.

almostbob 866 Retired: passive income ROCKS

15 Years Ago

the usual thing with cut n paste scripts <script> as supplied should be <script type='text/javascript'> this implementation will work

<html>
<head>
<script type='text/javascript'>
<!--
/*
Live Date Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12) {dn="PM"}
if (hours>12){ hours=hours-12 }
if (hours==0) { hours=12 }
if (minutes<=9) { minutes="0"+minutes }
if (seconds<=9) { seconds="0"+seconds }
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
-->
</script>
</head>
<body onLoad="goforit()">
<span id="clock"></span><!-- the span at left goes exactly where you want the clock -->
</body>
</html>

in relation to your first two posts
it takes longer than 5 hours to get a response from a company you pay,
all responses here are from 530 000 plus volunteers,
hosting costs the Queen a heap,
you get to wander in and & **expletive deleted ** think, the people who fix it for you FREE are in another **expletive deleted ** timezone

sreein1986 0 Posting Whiz

15 Years Ago

Here's a simple Javascript demo that will display time and date, based on the local time in your system.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Livedate Example</title>
<style id="internal" type="text/css">
/* <![CDATA[ */
span#timestamp {
   display : inline-block;
   font : normal normal normal 90%/1.6 Verdana, Arial, sans-serif;
   background-color : #f0f0f0;
   color : #708090;
   white-space : nowrap;
   letter-spacing : 2px;
   padding : .200em .500em .200em .500em;
   border : 1px solid #ccc; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var date;
var month, weekdays, day, year, hour, minute, seconds, ampm;
var livedate;
var showDate;

date = Date.prototype.date = function() {
   month = [ "January ", "February ", "March ", "April ", "May ", "June ", "July ", "August ", "September ", "October ", "November ", "December " ][ this.getMonth() ]; // Month Names
   weekdays = [ "Sunday - ", "Monday - ", "Tuesday - ", "Wednesday - ", "Thursday - ", "Friday - ", "Saturday - " ][ this.getDay() ]; // Weekday

   day = this.getDate();
   day = ((( day < 10 ? "0" : "" ) + day ) + ", " ); // Getting ate of the month.
   year = (( this.getFullYear() ) + " " ); // Current Year
   hour = this.getHours();
   ampm = (( hour >= 12 ) ? "pm" : "am" );
   hour = (( hour >= 13 ) ? hour - 12 : hour );
   hour = (( hour === 0 ) ? 12 : hour );
   hour = (( hour < 10 ? "0" : "" ) + hour );
   minute = this.getMinutes();
   minute = (( minute < 10 ? "0" : "" ) + minute );
   seconds = this.getSeconds();
   seconds = (( seconds < 10 ? "0" : "" ) + seconds );
   return weekdays + month + day + year + hour + ":" + minute + ":" + seconds + ampm.fontcolor("red");
};

showDate = function() {
   today = new Date();
   myDate = today.date();
   return (( document.getElementById ) ? document.getElementById("timestamp").innerHTML = myDate : document.all.timestamp.innerHTML = myDate ); 
};

window.onload = function() {
   livedate = setInterval("showDate()", 1000);
};
// ]]>
</script>
</head>
<body>
<div id="main">
<span id="timestamp"></span>

</div>
</body>
</html>

Hope it helps...

this code is working in IE perfectly

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

starengineer 0 Newbie Poster · Answer 1 · 2009-05-19T11:30:41+00:00

Wow not even one response....I was told that this site was friendly and helpful

starengineer 0 Newbie Poster · Answer 2 · 2009-05-20T10:43:14+00:00

Ok, no response to overwhelming acknowledgment. First let me say I hope I did not offend anyone here. But being the new kid on the block can be somewhat of a challenge. Trust me, I do appreciate the responses here.

I'll try working with the codes that almostbob & essential has so graciously offered thank you so much

StarEngineer

starengineer 0 Newbie Poster · Answer 3 · 2009-05-20T17:40:22+00:00

Essential I tried your codes and they work just fine like a charm. However, I do have one more question...is it possible to disable the time and just have the date showing? And you were right it works in IE also, when I look at it in Safari it good and in Firefox & opera but in IE8 it changes a little, the date font and time is very bold but it work good. thanks for the quick tip

StarEngineer

essential 84 Posting Shark Featured Poster · Answer 4 · 2009-05-20T22:06:47+00:00

Simply Insert this block after line#23

<!--[if IE 8]><style type="text/css">span#timestamp { font-size : 80%; font-weight : normal; }</style><![endif]-->

if you want to control any css rules in IE 8 mode browser. Doing this will not affect other style rules'. -

And with the script, you'll need to replace the entire <script>...</script> block with this moded version. You will find comments inside the script were you can set the time (on/off).

<script type="text/javascript">
// <![CDATA[
var date;
var month, weekdays, day, year, hour, minute, seconds, ampm;
var livedate;
var showDate;
var displayTime;

displayTime = false; // set true if you want to show the current time.

date = Date.prototype.date = function( showTime ) {
   month = [ "January ", "February ", "March ", "April ", "May ", "June ", "July ", "August ", "September ", "October ", "November ", "December " ][ this.getMonth() ]; // Month Names
   weekdays = [ "Sunday - ", "Monday - ", "Tuesday - ", "Wednesday - ", "Thursday - ", "Friday - ", "Saturday - " ][ this.getDay() ]; // Weekday

   day = this.getDate();
   day = ((( day < 10 ? "0" : "" ) + day ) + ", " ); // Getting ate of the month.
   year = (( this.getFullYear() ) + " " ); // Current Year
   hour = this.getHours();
   ampm = (( hour >= 12 ) ? "pm" : "am" );
   hour = (( hour >= 13 ) ? hour - 12 : hour );
   hour = (( hour === 0 ) ? 12 : hour );
   hour = (( hour < 10 ? "0" : "" ) + hour );
   minute = this.getMinutes();
   minute = (( minute < 10 ? "0" : "" ) + minute );
   seconds = this.getSeconds();
   seconds = (( seconds < 10 ? "0" : "" ) + seconds );

   if ( showTime ) { // You can rearrange everything from here on how you'd want to display any date object. -->
   return weekdays + month + day + year + hour + ":" + minute + ":" + seconds + ampm.fontcolor("red");
   } return weekdays + month + day + year; 
};

showDate = function() {
   (( displayTime ) ? displayTime : clearInterval( livedate ));
   today = new Date();
   myDate = today.date( displayTime ); 
   return (( document.getElementById ) ? document.getElementById("timestamp").innerHTML = myDate : document.all.timestamp.innerHTML = myDate ); 
};

window.onload = function() {
   livedate = setInterval("showDate()", 1000);
};
// ]]>
</script>

Hope it get's what you really need...

starengineer 0 Newbie Poster · Answer 5 · 2009-05-21T00:47:56+00:00

essential this is the code sheet I used on line #23 is
var hours=mydate.getHours()

<!--

/*

Live Date Script-

© Dynamic Drive ([url]www.dynamicdrive.com[/url])

For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,

visit [url]http://www.dynamicdrive.com[/url]

*/

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")

var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){

var mydate=new Date()

var year=mydate.getYear()

if (year < 1000)

year+=1900

var day=mydate.getDay()

var month=mydate.getMonth()

var daym=mydate.getDate()

if (daym<10)

daym="0"+daym

var hours=mydate.getHours()

var minutes=mydate.getMinutes()

var seconds=mydate.getSeconds()

var dn="AM"

if (hours>

=12) {dn="PM"}

if (hours>12){ hours=hours-12 }

if (hours==0) { hours=12 }

if (minutes<=9) { minutes="0"+minutes }

if (seconds<=9) { seconds="0"+seconds }

//change font size here

var cdate="<small> <font color='000000' face='Arial'> <b> "+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn

+"</b> </font> </small> "

if (document.all)

document.all.clock.innerHTML=cdate

else if (document.getElementById)

document.getElementById("clock").innerHTML=cdate

else

document.write(cdate)

}

if (!document.all&&!document.getElementById)

getthedate()

function goforit(){

if (document.all||document.getElementById)

setInterval("getthedate()",1000)

}

-->

</script>

</head>

<body onLoad="goforit()">

<span id="clock"></span><!-- the span at left goes exactly where you want the clock -->

</body>

</html>

essential 84 Posting Shark Featured Poster · Answer 6 · 2009-05-21T09:47:53+00:00

You may place it anywhere inside the header section of your page.

Just make sure it doesn't interfere with your <script></script> block.

starengineer 0 Newbie Poster · Answer 7 · 2009-05-21T15:04:16+00:00

Ok, I have two questions. based on the codes below where do I disable or turn on/off the time display.

Question (2) there is a line that say //change font size here
what is the format or javascript language to change the font size please give an example:

<html>
<head>
<script type='text/javascript'>
<!--
/*
Live Date Script- 
© Dynamic Drive ([url]www.dynamicdrive.com[/url])
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit [url]http://www.dynamicdrive.com[/url]
*/
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12) {dn="PM"}
if (hours>12){ hours=hours-12 }
if (hours==0) { hours=12 }
if (minutes<=9) { minutes="0"+minutes }
if (seconds<=9) { seconds="0"+seconds }
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
-->
</script>
</head>
<body onLoad="goforit()">
<span id="clock"></span><!-- the span at left goes exactly where you want the clock -->
</body>
</html>

almostbob 866 Retired: passive income ROCKS · Answer 8 · 2009-05-21T18:09:26+00:00

an old, form of html gives font sizes as <small><large> etc
directly below the //change font size you will see the code includes <small>some text </small> to set font size.
The script is old, and though it works it doesnt take advantage of recent developments.
the line

var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"

is the one that contains the strings for what is displayed

-copy it -comment it
and you can mess with the copy as much as you need to get the display as you wish

//commented out 
//var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>"
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>"

and still retain a backup of all the fields

starengineer 0 Newbie Poster · Answer 9 · 2009-05-23T12:05:51+00:00

almostbob how can I take advantage of recent developments.

would it look something like this

var cdate="<style="font-size:150% font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>"

here is the original

var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>"

sreein1986 0 Posting Whiz · Answer 10 · 2009-05-23T12:50:06+00:00

<body onLoad="goforit()"><script>
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
 
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='0000FF' face='Tahoma'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
 
</script>
<span id="clock"></span>
</body>

starengineer 0 Newbie Poster · Answer 11 · 2009-05-23T15:13:53+00:00

starengineer 0 Newbie Poster

15 Years Ago

sreein1986 this did solve my problem