Publish Current Date and Time With JavaScript
The current date and time according to the user's computer or device can be printed on a web page when it is loaded. You see that from time to time on websites.
The software in this article provides the means to customize the display, including non-English month and weekday names if you prefer.
If you've see your own time published on a web page and wondered how they know what time zone you are in, they don't need to know. The date is constructed from the clock within your computer or device.
It is how this JavaScript software works — by consulting the clock in your computer or device.
And that is the one big drawback. If the user's clock is incorrect, incorrect information will be published.
If that is acceptable, continue perusing this article. You'll find an overview, installation instructions, and customization suggestions.
Overview of the Date/Time Publishing Pieces
Installation is in two parts.
-
The point of publication.
Make a div where you want the date and/or time to publish. It can have any CSS styling you wish. It must have an id value because that is how the JavaScript will know where to put the information.
The div must contain placeholders for publishing specific date or time elements. The placeholder
{{MINUTE}}for where to publish the current minute is an example.The div may contain any other text you wish.
-
The JavaScript.
The JavaScript will run automatically and replace the placeholders in the div with current date and time information.
Create the div first. Then put the JavaScript into the page somewhere below the div in the source code.
The Date/Time Presentation Div
Here is an example div that displays the current date and time on your computer or device.
The date/time presentation div may be customized however you want — both style and content.
Here is the source code for the above div.
<div id="my-time-spot" style="border:3px solid #ccc; border-radius:.5em; padding:.75em;"> The date and time when this page loaded, according to your computer, is {{WEEKDAY}}, {{MONTHNAME}} {{DAY}}, {{YEAR}} at {{HOUR}}:{{MINUTE2}}:{{SECOND2}} {{APM}} </div>
The id value my-time-spot will be referred to in the JavaScript (see further below). If the id value is changed, a corresponding change needs to be made in the JavaScript.
The placeholders to be replaced with date and time elements are colored blue in the above div source code.
When creating your own date/time presentation div, the following placeholders may be used. The placeholders are case-sensitive. Any placeholder may be used more than once within the div.
| This placeholder | is replaced with … |
|---|---|
{{WEEKDAY}} |
The name of the day of the week. |
{{WEEKDAY3}} |
The first 3 characters of the name of the day of the week. |
{{WEEKDAY2}} |
The first 2 characters of the name of the day of the week. |
{{DAY}} |
The day number. |
{{DAY2}} |
The day number preceded with a "0" if less than 9. |
{{MONTH}} |
The month number. |
{{MONTH2}} |
The month number preceded with a "0" if less than 9. |
{{MONTHNAME}} |
The name of the month. |
{{MONTHNAME3}} |
The first 3 characters of the name of the month. |
{{MONTHNAME2}} |
The first 2 characters of the name of the month. |
{{YEAR}} |
The 4-digit year number. |
{{YEAR2}} |
The 2-digit year number. |
{{HOUR}} |
The hour number according to a 12-hour clock. |
{{HOUR2}} |
The hour number according to a 12-hour clock preceded with a "0" if less than 9. |
{{24HOUR}} |
The hour number according to a 24-hour clock. |
{{24HOUR2}} |
The hour number according to a 24-hour clock preceded with a "0" if less than 9. |
{{MINUTE}} |
The minute number. |
{{MINUTE2}} |
The minute number preceded with a "0" if less than 9. |
{{SECOND}} |
The second number. |
{{SECOND2}} |
The second number preceded with a "0" if less than 9. |
{{APM}} |
Either "AM" or "PM" (no quotes), whichever is applicable. |
{{apm}} |
Either "am" or "pm" (no quotes), whichever is applicable. |
When the date/time presentation div is ready, the JavaScript can be put on the page.
The JavaScript
When any customizations of the JavaScript are complete, put the code into your web page source code somewhere below the date/time presentation div. Immediately above the cancel </body> tag is fine.
<script type="text/javascript">
// The function:
function PublishDateTimeIntoDiv()
{
/* Customization */
var divID = "my-time-spot";
var Weekdays = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var Months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
/* End of Customization */
var datetimediv = document.getElementById(divID);
var datetimecontent = datetimediv.innerHTML;
var now = new Date();
var Weekday = Weekdays[now.getDay()];
datetimecontent = datetimecontent.replace(/\{\{WEEKDAY\}\}/g,Weekday);
datetimecontent = datetimecontent.replace(/\{\{WEEKDAY2\}\}/g,Weekday.substring(0,2));
datetimecontent = datetimecontent.replace(/\{\{WEEKDAY3\}\}/g,Weekday.substring(0,3));
var Month = now.getMonth();
var MonthString = Months[Month];
Month++;
datetimecontent = datetimecontent.replace(/\{\{MONTH\}\}/g,Month);
datetimecontent = datetimecontent.replace(/\{\{MONTH2\}\}/g,(Month<10?"0"+Month:Month));
datetimecontent = datetimecontent.replace(/\{\{MONTHNAME\}\}/g,MonthString);
datetimecontent = datetimecontent.replace(/\{\{MONTHNAME2\}\}/g,MonthString.substring(0,2));
datetimecontent = datetimecontent.replace(/\{\{MONTHNAME3\}\}/g,MonthString.substring(0,3));
var Year = String(now.getFullYear());
datetimecontent = datetimecontent.replace(/\{\{YEAR\}\}/g,Year);
datetimecontent = datetimecontent.replace(/\{\{YEAR2\}\}/g,Year.substring(2));
var Day = now.getDate();
datetimecontent = datetimecontent.replace(/\{\{DAY\}\}/g,Day);
datetimecontent = datetimecontent.replace(/\{\{DAY2\}\}/g,(Day<10?"0"+Day:Day));
var Hour24 = now.getHours();
var Hour = Hour24>12 ? Hour24-12 : Hour24;
datetimecontent = datetimecontent.replace(/\{\{HOUR\}\}/g,Hour);
datetimecontent = datetimecontent.replace(/\{\{HOUR2\}\}/g,(Hour<10?"0"+Hour:Hour));
datetimecontent = datetimecontent.replace(/\{\{24HOUR\}\}/g,Hour24);
datetimecontent = datetimecontent.replace(/\{\{24HOUR2\}\}/g,(Hour24<10?"0"+Hour24:Hour24));
var apm = Hour24<12 ? "AM" : "PM";
datetimecontent = datetimecontent.replace(/\{\{APM\}\}/g,apm);
datetimecontent = datetimecontent.replace(/\{\{apm\}\}/g,apm.toLowerCase());
var Minute = now.getMinutes();
datetimecontent = datetimecontent.replace(/\{\{MINUTE\}\}/g,Minute);
datetimecontent = datetimecontent.replace(/\{\{MINUTE2\}\}/g,(Minute<10?"0"+Minute:Minute));
var Second = now.getSeconds();
datetimecontent = datetimecontent.replace(/\{\{SECOND\}\}/g,Second);
datetimecontent = datetimecontent.replace(/\{\{SECOND2\}\}/g,(Second<10?"0"+Second:Second));
datetimediv.innerHTML = datetimecontent;
} // End of function PublishDateTimeIntoDiv()
// Launch the function:
PublishDateTimeIntoDiv();
</script>
The id value my-time-spot is for the id of the date/time presentation code div. If the div's id has been changed, change it here accordingly.
Immediately below the id value line, are the lines that specify the names for the days of the week and for the names of the months. The spellings of the names may be changed — to a non-English language, for example.
Those are the only customizations that need to be paid attention to.
Once any customizations are complete, paste the JavaScript into your source code somewhere below the date/time presentation div.
Your customization of the current date and time according to the user's computer or device will now be printed on the web page when the page is loaded.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
