JavaScript: Dates and Times

 

Variables & The Date Object

The Date object works with the computer clock to know what day it is and what time it is. The date and time can be stored in a variable, which (just like a variable in Algebra) can hold different values. A common way to declare a variable in JavaScript is with 'var.' For example, to declare a variable named 'now,' you could write:

var now

Date is an object in JavaScript, and to create a new object you use 'new' before the type of object you are creating. For example, to create a Date object and name it 'now' you could write:

var now = new Date()

(The parentheses are used because to create a new Date object, you call a method known as a 'constructor.' Methods are followed by parentheses.)

The variable 'now' holds the date and time at the moment the statement ran. How can you get access to this information? To extract the current year from 'now' and store it in the variable 'currentYear' you might write:

var currentYear = now.getFullYear()

Here is a list of similar methods:

Method Value Range Description
now.getTime() 0 - ... Milliseconds since 1/1/70 00:00:00 Greenwich Mean Time
now.getFullYear() 0 - ... Year
now.getMonth() 0 - 11 Month (January = 0)
now.getDate() 1 - 31 Date
now.getDay() 0 - 6 Day of week (Sunday = 0)
now.getHours() 0 - 23 Hour, in 24-hour time
now.getMinutes() 0 - 59 Minute
now.getSeconds() 0 - 59 Second

In addition to getting dates and times, you can set dates and times. Just as there is a method 'getFullYear()' there is a method 'setFullYear().' For example, if you have a Date variable 'aYear' and you want to set its year to 1995, you could write:

aYear.setFullYear(1995);

In the table above are listed eight 'get time' methods. If you substitute 'set' for 'get,' you have the eight methods that are available to set dates and times.

 

Status Bar

In the lower-left hand corner of the browser window, above the Start button, is the status bar. You can put text into the status bar using JavaScript. To do this, you modify the 'status' property of the 'window' object (though you can omit 'window' and begin the command with 'status.') If you want to put 'Hello, world!' into the status bar, for example, you could write:

status('Hello, world!')

 

Example

Let's do an example that makes use of the Date object, a variable, and the status bar. The Electronics department of eEverything.com has been throwing a sale since the first of the month. Let's find out what the current date and time are using Date. Then we'll modify the 'date' to be the 1st of the month and post a message that includes that date. Then we'll put the current time into the status bar with a message that reminds the viewer to start spending money. Here's the code:

 

<BODY>

<script language=JavaScript>

<!--

var aDate = new Date();

aDate.setDate(1); //sets the date to the 1st of the month

document.write("The sale in Electronics began " + (aDate.getMonth()+1) + "/" + aDate.getDate() + " and continues through the end of the month. Don't miss this opportunity to get <b>today's electronics</b> at <b>yesterday's prices</b>.");

status = "It is " + (aDate.getHours()) + ":" + (aDate.getMinutes()) + " now. What better time to check out the sales in Electronics?"

//-->

</script>

Note that January is month 0, so I've added 1 to the month in the document.write() command.

to see this how this code behaves in a new window.
(Note: Nothing shows up in the status bar in Navigator.)

 

Other Resources

Try these links on Date, variables and the status bar:


Page Link
Dates and Times www.htmlgoodies.com/primers/jsp/article.php/3478431
Variables and Data Types wdvl.internet.com/Authoring/JavaScript/Tutorial/variables.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) eEverything.com.

Use the Date object and the status property to put today's date into the status bar, in the format '10-23-2008.'

Extra Points: The Date object runs on milliseconds; the .getTime() method reports the number of milliseconds that have passed since January 1, 1970. Let the viewer of the page know that a special on leather sofas expires a week from today, and print to the screen a message that includes the date a week from now. (You may need to calculate the number of milliseconds in a week and use the .setTime() method to accomplish this.)

If you work on your own page, implement similar functionality.