| home / js / scripts / basic_date |
|
|
|
Have you been wanting to display the current date on your Web pages? There are several ways to accomplish it. One method uses JavaScript, and the good news is that you don't have to write the script from scratch. There are many sites that offer existing JavaScripts, such as JavaScript Source and Script Search. These scripts are usually provided free of charge.
The very thought of using JavaScript scares many people, although it shouldn't. When using an existing script, it usually doesn't take any programming knowledge to implement it. In our case, we have a ready-to-use basic date script, "right out of the box," thanks to our friends at cgiscript.net. This one even has comments so you can better understand how the script works.
First, let's look at the script itself. For the sake of brevity, I've removed all the comments and extra lines. The fully documented file can be found at cgiscript.net.
<script language="JavaScript">
<!--
var now = new Date();
var days = 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');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;}
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear()));
document.write(today);
//-->
</script>
The first and last two lines aren't part of the actual code. They tell the
browser the type of language used in the script and use the HTML comment code
to keep it from being viewed as text by older browsers. The script itself is
quite simple. The first part declares four variables: now, days,
months, and date. The function fourdigits
is then declared, which sets up the display of the year. Next, the four lines
shown in red specify the display format and the last line, shown in blue, tells
the script to print the information on the Web page.
As it's written in the script, the date is displayed on the Web page in the following format: Wednesday, January 05, 2005. This is accomplished as follows, using the code shown above in red:
today) and, using the getDay() method along with the days and now variables declared earlier in the script, the day of the week is obtained. Then a comma and a space are added ( + ", " +). This line will be displayed as Wednesday.getMonth() method, along with the months and now variables declared earlier, to obtain the month, i.e. January. It then adds a space (+ " " +).date variable, then a comma and a space are added (+ ", " +)fourdigits function along with the now variable and the getYear() method.The display format can be changed by making a few modifications in the lines shown in red. For instance, in order to change the display to January 05, 2005 (Wednesday), the code would be modified as shown in the box below. Notice that the only modification is in the last line. We moved it from the beginning to the end of our statement and added the parentheses.
today = months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) + " " +
"("+days[now.getDay()]+")";
If you want to display just the date, without the day of the week, you can modify the code as shown below:
today = months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear()));
There are two general methods used to place the script on the Web page. The one given by the folks at cgiscript.net places the script in the body of the document where it is to be displayed. Another, less confusing method would be to place the script in an external file and call it from within the page where you want it displayed. This method would save space and makes it easier to call the script from other pages, as well.
First, copy the script itself, without the opening and closing script and comments tags, and put it into a blank file. Then give the file a name, such as "date.js." It should look like the one in the box below (the last few lines may look different if you have made changes to the display format).
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var days = 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');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;}
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear()));
document.write(today);
To call the script, place a link to the file you just created on the Web page
where you want the date displayed. The link should look like this: <script
language="JavaScript" src="date.js"></script> Be sure there are no
spaces or code between the opening and closing <script> tags
as this may cause the loading of the script to fail.
That's all there is to it. We'll look at some other simple scripts in the future and see how to use them. In the meantime, if you have problems with other scripts, be sure to check out our JavaScript section and our forum.
| home / js / scripts / basic_date |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: January 10, 2005
URL: http://webreference.com/js/scripts/basic_date/
