Javascript Tutorial - Date

8/2/2019 Javascript Tutorial - Date

1/4

Home

Web Tuto r i a l sBeginner Tutorial

HTML Tutorial

CSS Tutorial

Sc r i p t i ngJavascript Tutorial

PHP Tutorial

Perl Tutorial

Ajax Tutorial

ASP Tutorial

VBScript Tutorial

DatabasesSQL Tutorial

MySQL Tutorial

Miscel laneousXML Tutorial

Webhost Tutorial

Flash Tutorial

SEO Tutorial

Javascr ipt Tutor ia lJavascript - Intro

Javascript - Syntax

Javascript - Enable

Javascript - Location

Javascript - External

Javascript - Operators

Javascript - Variables

Javascript - Functions

Javascript - Events

Javascript - Statements

Javascript - IfJavascript - Else If

Javascript - While

JavaScript Date and Time Object

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

simply use the system clock.

Advertise on Tizag.com

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 fewhours or they are in a different time zone, then the Date object will create adifferent 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 youdo not supply any arguments to the Date constructor (this makes the Dateobject) then it will create a Date object based on the visitor's internal clock.

HTML & JavaScript Code:

It is now


2/4

Javascript Tutorial - Date

Javascript - For Loop

Javascript - Comments

Javascript - Array

Javascript - Alert

Javascript - Confirm

Javascript - Prompt

Javascript - Print

Javascript - Redirect

Javascript - Pop Up

Javasc r i p t - Da te

Javascript - FormJavascript - Void 0

Javascr ipt St r ingJavascript - Strings

Javascript - Length

Javascript - Split

Javascript - Search

Javascript - Replace

Javascript - indexOf

Javascript - Compare

Javascr ipt AdvancedJavascript -

getElementByIdJavascript - innerHTML

Get Help!Javascript Forum

Contact Us

var currentTime = new Date()//-->

Display:

It is now

Nothing shows up! That's because we still don't know the methods of the Dateobject 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 thecurrent date! To get the information we need to print out, we have to utilizesome or all of the following functions:

q getTime() - Number of milliseconds since 1/1/1970 @ 12:00 AMq getSeconds() - Number of seconds (0-59)

q getMinutes() - Number of minutes (0-59)q getHours() - Number of hours (0-23)q getDay() - Day of the week(0-6). 0 = Sunday, ... , 6 = Saturday

q getDate() - Day of the month (0-31)q getMonth() - Number of month (0-11)q 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.


It is now


3/4


var month = currentTime.getMonth() + 1var day = currentTime.getDate()var year = currentTime.getFullYear()document.write(month + "/" + day + "/" + year)

//-->

Display:

It is now 7/22/2009 !

Notice that we added 1 to the monthvariable to correct the problem withJanuary 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 seeon a typical digital clock -- HH:MM AM/PM (H = Hour, M = Minute).


It is now


4/4


//-->

Display:

It is now 11:19 AM

Above, we check to see if either the hoursor minutesvariable is less than 10.If it is, then we need to add a zero to the beginning of minutes. This is notnecessary, but if it is 1:01 AM, our clock would output "1:1 AM", which doesn'tlook very nice at all!

q Go Back

q Continue

Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag

improving with time!

2003-2008 Erack Network | Copyright | Privacy Policy | Advertising Information

Site design by Seattle Web Design

http://www.tizag.com/javascriptT/javascriptdate.php (4 of 4)7/22/2009 11:20:02 AM
http://www.tizag.com/javascriptT/javascriptpopups.phphttp://www.tizag.com/javascriptT/javascriptform.phphttp://www.tizag.com/about/report.php?tutorial=Javascript%20Tutorial&lesson=Datehttp://www.tizag.com/about/copy.phphttp://www.tizag.com/about/privacy.phphttp://www.tizag.com/about/advertise.phphttp://www.epearl.net/http://www.epearl.net/http://www.tizag.com/about/advertise.phphttp://www.tizag.com/about/privacy.phphttp://www.tizag.com/about/copy.phphttp://www.tizag.com/about/report.php?tutorial=Javascript%20Tutorial&lesson=Datehttp://www.tizag.com/javascriptT/javascriptform.phphttp://www.tizag.com/javascriptT/javascriptpopups.phphttp://www.addthis.com/bookmark.php

Documents

Javascript Tutorial - Date