Making A new Date() Object

JavaScript can access the date and time on the viewer's machine by creating and using a Date() object. Check out this page.

The term "Date()" alone doesn't do anything. You must assign an object name to Date() and then refer to that object name. We do this just like assigning an object name to a window:

<script language="JavaScript">

now = new Date();

</script>

I used the name "now". You can use whatever name you'd like. I set "now" to equal "new Date()". This will load the current date and time values into the object we called "now". Do not precede your object name with "var" as you do in assigning a variable. Variables and object names are totally different creatures.

Don't forget the set of parentheses after "Date", and remember to capitalize the "D" in "Date". Don't forget "new" and a space before "Date()" All of this syntax is essential. These are the first things to check if a Date() function doesn't work.

Lets see what all is included in a "new Date()". I've set up a "new Date()" object on this page called "rightnow". Now I can code a link that will display "alert(rightnow)" and you can see the entire contents of the Date(). Click here to see this alert box.

Lots of stuff in this box. This is all of the date time stuff in your machine. This data does not come from a server or any standard. It comes from the viewer's machine.

It's rare that you need all of the parts of a full Date() object. In our example, we only use the day, date, month, and year. I'll show you how to use "document.write()" to present these elements in UK format.

Using "Gets"

Now that we have a "new Date()" object set up, we can "get" different elements of the date and time in numerical format. Lets get the year first:

<script language="JavaScript">

now = new Date();

year = now.getYear();

</script>

Again I assigned an object name. I used "year", you can use whatever you want. I'm using this object to hold the current year. To load the current year into the object "year" reference it by using "now.getYear()". Notice the use of the "now" Date() object. Don't forget to capitalize the "Y" in "Year" and add parentheses.

Now that the year 2000 has passed, the current year is represented by a four-digit number. Years in the 1900's were represented by only the last two digits.

Now you can use the object "year" in an alert() box or "document.write()" to display the current year: document.write(year).

Here's some more stuff you can "get":

day = now.getDay();
month = now.getMonth();
date = now.getDate();

Notice that they share a common syntax. You make up an object name to equal the "get". Then you type in the Date() object -- "now" in this case -- and a dot. Finally type in whichever "get" you need. Pay close attention to capitalization and don't forget the parentheses.

If you play around with these using alert() boxes or "document.write()" you'll notice that all of the value are numerical. This is true even for months and days. It is important to understand how this works.

The reason that "gets" aren't strings, like "Friday" or "November", is that you may want to compare times or use them in a math formulas. Don't worry about those manipulations for now. Just remember that all of the "gets" are numbers, not strings.

The "getMonth()" object will return a number from 0 to 11 with 0 being January and 11 being December. Days are likewise arranged with 0 being Sunday and 6 being Saturday. Remember that the count begins with zero.

Assigning Strings For Month & Day

Generally when we present a month or day of the week, we'd rather use a string than the raw numerical value returned by a "get" object. There are different ways to do this, but I've used an easy to understand method to get this done. I used IF statements:

month = now.getMonth();

if (month == 0){month = "January"}
if (month == 1){month = "February"}
...
if (month == 11){month = "December"}

The above checks to see what numerical value is assigned to the "month" object set in the first line. Then it changes "month's" value to the corresponding string -- "January" instead of 0 for example.

Now when the object "month" is used, the string, and not the numerical value, will be displayed.

The days of the week can be assigned the same way:

day = now.getDay();

if (day == 0){day = "Sunday"}
if (day == 1){day = "Monday"}
...
if (day == 6){day = "Saturday"}

This would switch the numerical value initially assigned to the "day" object to a string representing the day of the week.

Displaying The Date

You can display the date on your page by using "document.write()". Just make a Date() object and then "get" the sub-objects you want to use. Now use the object names you assigned the "gets" in a "document.write()" in your <body>.

<body>

<script language="JavaScript">
document.write(day + " " + date + " " + month + " " + year)
</script>

The above assumes you have used "day", etc. when you assigned your object names. You have to use whatever object names you actually assigned. The spaces in quotes are just there to provide non-breaking spaces for a clearer display.

Summary & Exercises

To begin using the date from the viewer's machine, you must make up an object name and assign it the value "new Date()". Proper capitalization and use of parentheses are critical with "new Date()" and "gets".

Once you establish a Date() object, you can use "gets" to assign an object name to various Date() elements like day (date_object_name.getDay()) or month (date_object_name.getMonth()).

All "gets" are numerical values. You can, however, use IFs or other methods to assign strings for display purposes. You'll appreciate the numerical values later when you use dates in math formulas.

Once you've got the Date() and your "gets" properly assigned to object names, you can use these object names much like variables to display the date in an alert() box or on your page using "document.write()".

Begin working with Date() by making the sample page a couple of times from scratch. Expect to make syntax errors in your first JavaScripts using Date(), so keep an eye out and check them first if things go wrong.

Next, use "document.write()" to put the date inline with some other content on a page. Mix and match the order in which you present the "gets" like presenting the date in US format with a comma (month date, year).

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index