Introduction
The current date can easily be added to your Joomla! Web site using JavaScript and a custom HTML module. As an example of this technique, the current date appears at the bottom of the left column on every page of this Web site. To add the current date to your Joomla! Web site, follow the instructions below.
Step 1: Create a New Custom HTML Module
To create a new custom HTML module in Joomla!, bring up Module Manager from the Extensions drop down menu. Once in Module Manager, click the New button in the upper right corner. A window with new module choices will appear. Choose the Custom HTML radio button and then click Next. In the Details and Menu Assignment panes of the new module window, add a title* and choose where you want the module to appear on your Joomla! Web site. On my Joomla! site I placed the date module at the bottom of the left column but you can place it anywhere you like.
*You should select the "no" radio button for Show Title in the Details pane of the module.
Step 2: Add the JavaScript Date Code to the New Custom HTML Module
Copy the JavaScript code below and paste it into the Custom Output box of the new Custom HTML module you created in step 1. This code creates the current date and writes it to the page using a document.write statement.
<noscript>
Welcome to my Joomla! site
</noscript>
<script type="text/javascript">
var date_ob = new Date()
var mon = new Array()
mon[0] = "January"
mon[1] = "February"
mon[2] = "March"
mon[3] = "April"
mon[4] = "May"
mon[5] = "June"
mon[6] = "July"
mon[7] = "August"
mon[8] = "September"
mon[9] = "October"
mon[10] = "November"
mon[11] = "December"
var day = new Array()
day[0] = "Sunday"
day[1] = "Monday"
day[2] = "Tuesday"
day[3] = "Wednesday"
day[4] = "Thursday"
day[5] = "Friday"
day[6] = "Saturday"
document.write("<h3>Today is</h3>" + day[date_ob.getDay()] +
", " + mon[date_ob.getMonth()] + " " +
date_ob.getDate() + ", " + date_ob.getFullYear())
</script>
Step 3: Save the New Module
After you have added the JavaScript date code, click the Save or Apply button in the upper right corner of the new module window. The new module will be saved and the current date will appear on your Joomla! Web site.
Modifying the Script
You're welcome to modify the script as needed. For example, you may want to output the day, month, and date but not the year to your Web site. To do so, get rid of all of the code after the date_ob.getDate() statement (but not the last right parenthesis character; this closes the JavaScript document.write statement).
Problems
If JavaScript is disabled this script won't work and nothing will appear on the Web page. To avoid this I added some text in an HTML <noscript> tag at the top of the script. You can change the text to whatever you like.
If you have any questions about this technique or you experience problems with the code, please contact me,
This e-mail address is being protected from spambots. You need JavaScript enabled to view it
.
