CTN 162

Date objects

Notes from May 04, 2005 class

new Date(); will create a new instance of a Date object. Since there's nothing in the parentheses, JavaScript will use the exact moment when the page loaded as the value of the date object.

You can also specify the date you want to use as the value of a new date object.

var theDate2 = new Date("15 Mar 2005");
document.write("Ceasar, beware the Ides of March, " +theDate2 + " ");

This code:

var myDate = new Date();
document.write("You visited this page at " + myDate);

is just dumping the value of the Date object onto the page. Because we've not told it otherwise, JavaScript is going to include everything it knows about the date. It will display in the browser like this:

You visited this page at Wed Apr 20 2005 12:26:14 GMT-0700

You might be cluttering the screen, and the user's brain, with more information than they needed. So, we can use our handy Appendix B to find some methods for the date object we're using, that'll let us extract and display only the information you wanted to display.

var myDate = new Date();
document.write("You visited this page during the year "+ myDate.getFullYear()+" ");
document.write("You arrived at "+ myDate.getHours() + ":" + myDate.getMinutes() );
//notice we had to add in the colon between the hours and minutes
//notice, two sets of closing parentheses

Here are some more methods for the date object, and some code to help you see how they'll look on screen:

var theDate1 = new Date();
theMonth = theDate1.getMonth();
theYear = theDate1.getFullYear();
// only works in browsers >= 4
theDay = theDate1.getDay();
theString = theDate1.toDateString();
// toDateString() only works on browsers >= 5.5

document.write("The date is " + theDate1 + " ");
document.write("The month is " + theMonth + " ");
// notice that the month array index starts at zero, so May is 4, not 5

document.write("The year is " + theYear + " ");
document.write("The day of the week is " + theDay + " ");
/* notice that this printed out a numeric value for the day: "The day is 3" for Wednesday, for example. */
document.write("The full date is is " + theString + " ");

This will make the month print out a little better:

document.write("The month is really " + (theMonth +1) + " ");

At least now, May will show as 5 instead of 4.

Page 138 gives us a nice script for looking at dates:

var months = new Array("January","February","March","April","May","June","July",
"August","September","October","November","December");

There is no method of the Date object that'll give us the month by name, so we create an array that we can map to the month number. This is a bonus since in JavaScript both the month numbers and the array index start at zero.

var dateNow = new Date();
// new date object, initialized to current time and date since we've not said otherwise
var yearNow = dateNow.getFullYear();
// set yearNow variable to the current year
var monthNow = months[dateNow.getMonth()];
/* populate the monthNow variable with the value from the array element with an index of that returned by getMonth(). */
var dayNow = dateNow.getDate();
// current day of the month

Here's an elegant use of a switch() method to put the right suffix on the day of the month: st for the 1st, rd for the 3rd, etc.

var daySuffix;

switch (dayNow)
{
case 1:
case 21:
case 31:
daySuffix = "st";
break;
case 2:
case 22:
daySuffix = "nd";
break;
case 3:
case 23:
daySuffix = "rd";
break;
default:
daySuffix = "th";
break;
}

document.write("It is the " + dayNow + daySuffix + " day ");
document.write("in the month of " + monthNow);
document.write(" in the year " + yearNow);

Setting date variables

You can change the value of a date object from what's already been declared:

var theDate2 = new Date("15 Mar 2005");
document.write("The day is now "+theDate2 + " ");
theDate2.setMonth(3);
// integer variable for setMonth, remember that January=0, etc.
document.write("The day is now "+theDate2 + " ");

If you set a date outside a sensible range (say it's May 20th and you set the date by adding 20 to it), Javascript does the necessary caclulations so that 20 days after May 20th doesn't show up as May 40th.

Getting time values

The methods for retieving time values work pretty much the same as do the ones for date values. Choices are:

getHours()

getMinutes()

getSeconds()

getMilliseconds() (only in MSIE 4.0 + or Netscape 4.06 +)

toTimeString()

Setting time values

The methods for setting time values also work pretty much the same as do the ones for date values. Choices are:

setHours()

setMinutes()

setSeconds()

setMilliseconds() (only in MSIE 4.0 + or Netscape 4.06 +)

As with date values, if you set anything to an illegal value, JavaScript assumes you mean the next or previous time boundary. So, if it's 9:57 and you set minutes to 64, JavaScript will set the time to 10:04, which is 64 minutes from 9:00.

Page 142 of the book has a script to write the current time into a page.

var greeting;

var nowDate = new Date();
var nowHour = nowDate.getHours();
var nowMinute = nowDate.getMinutes();
var nowSecond = nowDate.getSeconds();

if (nowMinute < 10)
{
nowMinute = "0" + nowMinute;
}

if (nowSecond < 10)
{
nowSecond = "0" + nowSecond;
}

if (nowHour < 12)
{
greeting = "Good Morning";
}
else if (nowHour < 17)
{
greeting = "Good Afternoon";
}
else
{
greeting = "Good Evening";
}

document.write("<H4>" + greeting + " and welcome to my website</H4>")
document.write("According to your clock the time is ");
document.write(nowHour + ":" + nowMinute + ":" + nowSecond);

Notice how the script adds a zero in front of the minutes if they're single-digit, so the time will show as 11:01 instead of 11:1