Basic JavaScript Date and Time Functions

As the title implies, this tutorial will show you how to get the date and time from the visitor's computer and print them to the web page.

You'll learn two basic techniques:

1. How to create what's called a date object.

2. How to extract information from that date object; the hour, minute, month, year, and so forth.

A complete working example of what you'll learn here is near the end of this tutorial.

How To Create What's Called a Date Object

When a date object is created, it is stored in what's called a variable. A variable is simply the name of a place in memory that can contain information. In our example, we'll call that variable "now" because it's a good name for the current date and time.

This is how you create a date object and store it in a variable:

var now = new Date();

The "new Date()" part of the above statement creates the date object. The "var now =" part causes the date object to be stored in the variable named "now".

How To Extract Information From that Date Object

Lots of information can be extracted from a date object. In this tutorial, we'll extract only what we'll need:

var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var monthnumber = now.getMonth();
var monthday = now.getDate();
var year = now.getYear();

Notice that the name of the variable containing the date object and a period are followed by the function name. The function extracts the information from the date object and stores it in the variable named on the left of the equal sign.

All of the function names are intuitive except getDate(), which gets the day of the month rather than a date. Do not confuse "getDate()" with "new Date()" -- the former, as stated, extracts the day of the month from a date object. The latter creates the date object itself.

Printing the Date and Time

The example near the end of this tutorial demonstrates one method of obtain the date and time and printing it on a web page.

The Date

To get the date, the complete working example further below has a function called getCalendarDate()

The first 13 lines of the function creates an array containing the names of the calendar month. The value obtained from the now.getMonth() function is used to determine which month name to use. The line that does that is

var monthname = months[monthnumber];

When now.getMonth() extracts a month number, it assumes January is number 0 and December is number 11. If you prefer to print the number of the month instead of the name of the month, replace the above line with

monthnumber = monthnumber + 1;

to conform the month number with the way most humans count them (January = 1, etc.).

The getCalendarDate() function also has a line to adjust the year if the visitor is using an older browser that still assumes we're living in the 1900's. You'll recognize the line when you read the code.

getCalendarDate() constructs a string of characters representing the calendar date. It then returns that construction to whatever JavaScript code calls the function.

The Time

To get the time, the complete working example further below has a function called getClockTime()

getClockTime() includes code to format the clock time into an "AM" or "PM" representation. The following four lines accomplish that.

var ap = "AM";
if (hour > 11) { ap = "PM"; }
if (hour > 12) { hour = hour - 12; }
if (hour == 0) { hour = 12; }

If you want the clock time to represent a 24-hour clock instead of an "AM/PM" representation, simply remove those four lines from the function.

getClockTime() constructs a string of characters representing the clock time. It then returns that construction to whatever JavaScript code calls the function. If you don't want the construction to include the "AM" or "PM" part, remove the last two lines from the code that constructs the clock time.

The Printing

To print the date and time, use JavaScript to call the getCalendarDate() and getClockTime() functions. Then print the strings of characters they return. Example:

<script type="text/javascript" language="JavaScript"><!--
var calendarDate = getCalendarDate();
var clockTime = getClockTime();
document.write('Date is ' + calendarDate);
document.write('<br>');
document.write('Time is ' + clockTime);
//--></script>

The Complete Working Example

Here is a web page that incorporates everything this tutorial has mentioned.

Note that JavaScript is line break sensitive. Thus, it's best to keep the lines as they are, at least until you are ready to do custom modifications.

<html>
<head>

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2002 Bontrager Connection, LLC

function getCalendarDate()
{
var months = new Array(13);
months[0] = "January";
months[1] = "February";
months[2] = "March";
months[3] = "April";
months[4] = "May";
months[5] = "June";
months[6] = "July";
months[7] = "August";
months[8] = "September";
months[9] = "October";
months[10] = "November";
months[11] = "December";
var now = new Date();
var monthnumber = now.getMonth();
var monthname = months[monthnumber];
var monthday = now.getDate();
var year = now.getYear();
if(year < 2000) { year = year + 1900; }
var dateString = monthname + 
' ' + 
monthday + 
', ' + 
year;
return dateString;
} // function getCalendarDate()

function getClockTime()
{
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var ap = "AM";
if (hour > 11) { ap = "PM"; }
if (hour > 12) { hour = hour - 12; }
if (hour == 0) { hour = 12; }
if (hour < 10) { hour = "0" + hour; }
if (minute < 10) { minute = "0" + minute; }
if (second < 10) { second = "0" + second; }
var timeString = hour + 
':' + 
minute + 
':' + 
second + 
" " + 
ap;
return timeString;
} // function getClockTime()

//-->
</script>

</head>
<body>

<script type="text/javascript" language="JavaScript"><!--
var calendarDate = getCalendarDate();
var clockTime = getClockTime();
document.write('Date is ' + calendarDate);
document.write('<br>');
document.write('Time is ' + clockTime);
//--></script>

</body>
</html>

That's the complete working example. Create a file with the example and load it into your browser.

Functions getCalendarDate() and getClockTime() can be used wherever you need to extract the calendar date or clock time. While outside the scope of this tutorial, those results can be used in status bars, form fields, and other locations such as the title bar and in applications with layers. The time can be continuously updated by repeatedly calling the getClockTime() and printing the latest results.

With the above example, you have the basics to build your own calendars and clocks.

Will Bontrager