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.
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, 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 9/30/2011 !
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 11:56 AM
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!
