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.

Analyze and Optimize your Website ...

Arclab® Website Link Analyzer is a software product for Windows PC to analyze and optimize your website for search engines (SEO), create sitemaps, scan for broken links and other problems.

 

Learn more    Download Trial

Website Link Analyzer

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
Disclaimer: The information on this page is provided "as is" without warranty of any kind. Further, Arclab Software does not warrant, guarantee, or make any representations regarding the use, or the results of use, in terms of correctness, accuracy, reliability, currentness, or otherwise. See: License Agreement