Date and Time in HTML Webpages
Display Date and Time using Javascript, php or Server Side Includes (SSI)
Display Date and Time using Javascript (Client-side)
First we need to define where the date/time should be shown in the HTML page by adding an id to an e.g. <span> or <p> element.
<span> Element Sample:
<p>Date/Time: <span id="datetime"></span></p>
<p> Element Sample:
<p>Date/Time:</p>
<p id="datetime"></p>
Now let's assign the date/time to the content (innerHTML) of the element with the id="datetime".
<p>Date/Time: <span
id="datetime"></span></p>
<script>
var
dt = new Date();
document.getElementById("datetime").innerHTML
= dt.toLocaleString();
</script>
If you want to show the current date only:
<p>Date/Time: <span
id="datetime"></span></p>
<script>
var
dt = new Date();
document.getElementById("datetime").innerHTML
= dt.toLocaleDateString();
</script>
If you want to show the current time only:
<p>Date/Time: <span
id="datetime"></span></p>
<script>
var
dt = new Date();
document.getElementById("datetime").innerHTML
= dt.toLocaleTimeString();
</script>
We used the "toLocaleString" functions in our code, which means the output depends on the user locale. This might be ok for most, but could be a problem if you want to display the date/time locale independent, e.g. DD.MM.YYY hh:mm (German). The solution is to build our own string using the Date functions:
MM/DD/YYYY hh:mm Sample:
<p>Date/Time: <span id="datetime"></span></p>
<script>
var dt = new Date();
document.getElementById("datetime").innerHTML
= (("0"+(dt.getMonth()+1)).slice(-2)) +"/"+ (("0"+dt.getDate()).slice(-2)) +"/"+
(dt.getFullYear()) +" "+ (("0"+dt.getHours()+1).slice(-2)) +":"+ (("0"+dt.getMinutes()+1).slice(-2));
</script>
DD.MM.YYYY hh:mm Sample:
<p>Date/Time: <span id="datetime"></span></p>
<script>
var dt = new Date();
document.getElementById("datetime").innerHTML
= (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+
(dt.getFullYear()) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
</script>
We add leading zeros to day, month, hours and minutes (we add a leading 0
and use the 2 most-right chars).
You can find the complete list of Date methods
@w3schools.com.
Display Date and Time using php (Server-side)
Important: This code will display the date/time on the server
and works only if your webpage has the extension .php!
If you want to show the client-side date, use javascript (see above) instead.
<!doctype html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<p>Date/Time:
MM/DD/YYYY hh:mm<br>
<?php echo(strftime("%m/%d/%Y %H:%M"));
?></p>
<p>Date/Time:
DD.MM.YYYY hh:mm (German)<br>
<?php echo(strftime("%d.%m.%Y
%H:%M")); ?></p>
</body>
</html>
We can use the strftime function in php, which makes it really easy to
include the date/time.
Please take a look at
w3schools.com for a complete list of date/time format parameters.
Display Date and Time using Server Side Includes (SSI)
Important: Server Side Includes have the extension .shtml
(by default).
Only use this code if your webserver has enabled SSI for
the file extension of the webpage.
We configure the time format (timefmt) first using a #config, then #echo (output) the "LOCAL_DATE":
MM/DD/YYYY hh:mm Sample:
<p>Date/Time: MM/DD/YYYY hh:mm<br>
<!--#config timefmt="%m/%d/%Y %H:%M" -->
<!--#echo var="DATE_LOCAL" -->
</p>
DD.MM.YYYY hh:mm Sample:
<p>Date/Time: MM/DD/YYYY hh:mm<br>
<!--#config timefmt="%d.%m.%Y %H:%M" -->
<!--#echo var="DATE_LOCAL" -->
</p>
"timefmt" Parameter:
- %a Abbreviated Weekday Name
- %A Full Weekday Name
- %b Abbreviated Month Name
- %B Full Month Name
- %c Preferred Date & Time
- %d Day of Month as digit
- %H Hour Number (24-Hour Clock)
- %I Hour Number (12-Hour Clock)
- %j Day of the Year Number
- %m Month as digit
- %M Minute Number
- %p AM or PM
- %S Second Number
- %U Week Number/Sunday as Day One
- %w Day of the Week Number
- %x Preferred Format without Time
- %X Preferred Format without Date
- %y Two-Digit Year Number
- %Y Four-Digit Year
- %Z Time Zone