JavaScript Date and Time Object

The Date object is useful when you want to display a date or use a timestamp in some sort of calculation. In Java, you can either make a Date object by supplying the date of your choice, or you can let JavaScript create a Date object based on your visitor’s system clock. It is usually best to let JavaScript simply use the system clock.

When creating a Date object based on the computer’s (not web server’s!) internal clock, it is important to note that if someone’s clock is off by a few hours or they are in a different time zone, then the Date object will create a different times from the one created on your own computer.

JavaScript Date Today (Current)

To warm up our JavaScript Date object skills, let’s do something easy. If you do not supply any arguments to the Date constructor (this makes the Date object) then it will create a Date object based on the visitor’s internal clock.

<h4>It is now
<script type="text/javascript">
<!--
var currentTime = new Date()
//-->
</script>
</h4>

<h4>It is now
<script type="text/javascript">
<!--
var currentTime = new Date()
//-->
</script>
</h4>

Nothing shows up! That’s because we still don’t know the methods of the Date object that let us get the information we need (i.e. Day, Month, Hour, etc).

Get the JavaScript Time

The Date object has been created, and now we have a variable that holds the current date! To get the information we need to print out, we have to utilize some or all of the following functions:

• getTime() – Number of milliseconds since 1/1/1970 @ 12:00 AM
• getSeconds() – Number of seconds (0-59)
• getMinutes() – Number of minutes (0-59)
• getHours() – Number of hours (0-23)
• getDay() – Day of the week(0-6). 0 = Sunday, … , 6 = Saturday
• getDate() – Day of the month (0-31)
• getMonth() – Number of month (0-11)
• getFullYear() – The four digit year (1970-9999)

Now we can print out the date information. We will be using the getDate, getMonth, and getFullYearmethods in this example.

<h4>It is now
<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
//-->
</script>
</h4>

Output

It is now 1/31/2012 !

Notice that we added 1 to the month variable to correct the problem with January being 0 and December being 11. After adding 1, January will be 1, and December will be 12.

JavaScript Current Time Clock

Now, instead of displaying the date we, will display the format you might see on a typical digital clock — HH:MM AM/PM (H = Hour, M = Minute).

<h4>It is now
<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
document.write(hours + ":" + minutes + " ")
if(hours > 11){
document.write("PM")
} else {
document.write("AM")
}
//-->
</script>
</h4>

Output:

<h4>It is now<span>  </span>
<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
document.write(hours + ":" + minutes + " ")
if(hours > 11){
document.write("PM")
} else {
document.write("AM")
}
//-->
</script>
</h4>

Output:

It is now 12:51 PM

Above, we check to see if either the hours or minutes variable is less than 10. If it is, then we need to add a zero to the beginning of minutes. This is not necessary, but if it is 1:01 AM, our clock would output “1:1 AM”, which doesn’t look very nice at all!