Date and Time Script

[secretply]

I need some help with adding Date and Time to automatically update itself on the webpage based on the viewer's computer date and time. I have an idea of something like this, (left-aligned) Current Date: <Date>, (right-aligned) Current Time: <Time>, where <Date> is the date code to be updated automatically and where <Time> is the time code to be updated automatically. Any help I receive will be greatly appreciated.

 

[Scoochi2]

What language are you using. Furthermore, do you want <DATE> and <TIME> to be something held separately or just information for the viewer?

If it's just information to the viewer, you can use JavaScript to get and show their time.

<script type="text/javascript">
<!--
var currentTime = new Date();

var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (hours < 10)
hours = "0" + hours;  // JS will only show the bare minimum, but we want it to look proper. ie, no times of 1:2
if (minutes < 10)
minutes = "0" + minutes;

var year = currentTime.getFullYear();
var month = currentTime.getMonth() + 1; // consider month as an array starting at 0 and ending at 11
var day = currentTime.getDate();
if (month < 10)
month = "0" + month;
if (day < 10)
day = "0" + day;

document.write("TIME: " + hours + ":" + minutes + ":<sub>" + seconds +"</sub>") ;
document.write("<br>DATE: " + day + "/" + month + "/" + year) ;


//-->
</script>

The above script will output something like:
TIME: 21:37:15
DATE: 25/04/2009

Just add your own styling elements and output method to get them how you want.


If you don't want to use JS, you could use server side code to show the time.
For example, in PHP you could find out the user's local timezone and show the server time, plus or minus whatever to get the correct time for the viewer. (for example: if your server is GMT+0200 and the viewer is GMT+0800, then show the server time + 6 hours.

 

[secretply]

I have re-formatted everything to my benefit and it works perfectly. The problem is that the time doesn't automatically update itself on the webpage, only when the webpage is refreshed/reload. This might also happen to the date as well. Think you can help me for hopefully the last time right now? Thanks for all the hard work.

 

[misson]

The problem is that the time doesn't automatically update itself on the webpage, only when the webpage is refreshed/reload.

Use setInterval to repeatedly run a function.

document.write is horribly outdated and won't let you update elements. Put each field in its own element (probably a <span>). Use document.getElementById to get a reference to each element in the script. Assign to element.firstChild.nodeValue to change the text (element.firstChild will be a text node, and a text node's nodeValue holds its text).

Personally, I'm not a fan of clocks on webpages. They just clutter up the interface. If I want to check the time, my computer already displays that information.

 

[hezuo]

thanks! I was also looking for adding time into my website.

 

[quantum1]

I messed around with PHP date stuff and made this little utility of dubious usefulness:

http://quantum1.x10hosting.com/index.php?do=dates

 

[garrettroyce]

Looks good! There's this little extra output though at the beginning:



 

[quantum1]

Thanks for catching that. I will check out my php and post the source so you and others can comment on it. I am always learning from others. This forum is very useful for learning new ideas and techniques. :drool: