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
time than the one created with 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.
HTML & Javascript Code:
<h4>It is now
<script type="text/javascript">
<!--
var currentTime = new Date()
//-->
</script>
</h4>
Display:
It is now
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 the date 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 getFullYear methods in this example.
HTML & Javascript Code:
<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>
Display:
It is now
!
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).
HTML & Javascript Code:
<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>
Display:
It is now
We check to see if hours or minutes 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 then our clock would output "1:1 AM", which doesn't look very nice at all!
|