JavaScript: Date Object



Author: Ronald S. Holland
at
Total Application Works



<

To contact us



[HOME] [Consulting] [Design] [Maintenance] [Project] [Testing] [Training] [Turnkey] [Java] [C++] [SQL] [HTML] [JavaScript ]

© 2002 - 2011 All Rights Reserved Total Application Works


  • Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
  • <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/Javascript/Date/JS_Date_Object.html">
    Lists and their Tags </a>
    </table>
    </body>
    </html>

JavaScript Date Object

Introduction

The purpose of this tutorial is to introduce and explore JavaScript functions. This tutorial assumes that you have read and mastered my tutorials on:

  1. Table Tags
  2. Form Tags
  3. Introduction to JavaScript
  4. JS: basic Calculator
This tutorial assumes that you have some prior programming experience. It is not intended to be a comprehensive discussion on JavaScript or programming. In this tutorial, we will briefly discuss functions, as we ease into JavaScript, and build on what we learned in JS: basic Calculator (see ref. 3 above). In the next section, we will briefly describe JavaScript basics.

What is JavaScript?

JavaScript is a scripting language developed by Netscape that enables Web designers to create interactive sites/web pages. JavaScript and Java have many features and structures in common, however, they were developed independently. When JavaScript embedded within HTML source code, it enables Web designers to spice up their sites with dynamic content. JavaScript is used in Web pages designers to:

  • Improve the Web page dynamic content design;
  • Add interactivity to HTML pages;
  • Validate forms and gather data from users;
  • Detect browsers;
  • Create cookies;
  • Etc.
JavaScript is a scripting/interpreted language, which can execute without having to compile the source code. Java and JavaScript are similar but are not the same. They are two completely different languages in both concept and design. It runs on the client's computer and does not require constant downloads from your web site.

What is a JavaScript Date object?

The JavaScript Date object is responsible for JavaScript's date and time handling.

How do you create the Date object?

You can create a Date object by doing the following:

<script>
var myDate = new Date([ parameters]);
alert( "Value of myDate after to_String() " + 
         myDate.toString()  ) ;
</script>
Figure 1: Creating a Date Object


In the Figure 1 table above, myDate is the Date object. The Date object evaluates to an object rather than to some string or numeric value. Another point to remember is that var myDate is a reference to where the Date object resides. Your street address is a reference to where you reside. Your street address does not contain your possessions; it is a reference to where to find your possessions. What does this really mean? The street address is a reference. Your apartment or house can be thought of as a container. In the next section, we will explore the methods found on the Date class.

What are the methods in the Date object?

The following table contains the Date object methods and a brief description of its functionality/behavior.

Date Object Methods
Method Description
Date() Returns today's date and time
getDate() Returns the day of the month from a Date object (from 1-31)
getDay() Returns the day of the week from a Date object (from 0-6)
getFullYear() Returns the year, as a four-digit number, from a Date object
getHours() Returns the hour of a Date object (from 0-23)
getMilliseconds() Returns the milliseconds of a Date object (from 0-999)
getMinutes() Returns the minutes of a Date object (from 0-59)
getMonth() Returns the month from a Date object (from 0-11)
getSeconds() Returns the seconds of a Date object (from 0-59)
getTime() Returns the number of milliseconds since midnight Jan 1, 1970
getTimezoneOffset() Returns the difference in minutes between local time and Greenwich Mean Time (GMT)
getUTCDate() Returns the day of the month from a Date object according to universal time (from 1-31)
getUTCDay() Returns the day of the week from a Date object according to universal time (from 0-6)
getUTCMonth() Returns the month from a Date object according to universal time (from 0-11)
getUTCFullYear() Returns the four-digit year from a Date object according to universal time
getUTCHours() Returns the hour of a Date object according to universal time (from 0-23)
getUTCMinutes() Returns the minutes of a Date object according to universal time (from 0-59)
getUTCSeconds() Returns the seconds of a Date object according to universal time (from 0-59)
getUTCMilliseconds() Returns the milliseconds of a Date object according to universal time (from 0-999)
getYear() Returns the year, as a two-digit or a three/four-digit number, depending on the browser. The results could cause errors in your calculation, so you should use getFullYear().
parse() Takes a date string and returns the number of milliseconds since midnight of January 1, 1970
setDate() Sets the day of the month in a Date object (from 1-31)
setFullYear() Sets the year in a Date object (four digits)
setHours() Sets the hour in a Date object (from 0-23)
setMilliseconds() Sets the milliseconds in a Date object (from 0-999)
setMinutes() Set the minutes in a Date object (from 0-59)
setMonth() Sets the month in a Date object (from 0-11)
setSeconds() Sets the seconds in a Date object (from 0-59)
setTime() Calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970
setUTCDate() Sets the day of the month in a Date object according to universal time (from 1-31)
setUTCMonth() Sets the month in a Date object according to universal time (from 0-11)
setUTCFullYear() Sets the year in a Date object according to universal time (four digits)
setUTCHours() Sets the hour in a Date object according to universal time (from 0-23)
setUTCMinutes() Set the minutes in a Date object according to universal time (from 0-59)
setUTCSeconds() Set the seconds in a Date object according to universal time (from 0-59)
setUTCMilliseconds() Sets the milliseconds in a Date object according to universal time (from 0-999)
setYear() Sets the year in the Date object (two or four digits). You should use setFullYear() because using setYear might result in errors in your calculations.
toDateString() Returns the date portion of a Date object in readable form
toGMTString() Converts a Date object, according to Greenwich time, to a string. Use toUTCString() to minimize errors in your calculations.
toLocaleDateString() Converts a Date object, according to local time, to a string and returns the date portion
toLocaleTimeString() Converts a Date object, according to local time, to a string and returns the time portion
toLocaleString() Converts a Date object, according to local time, to a string
toSource() Represents the source code of an object
toString() Converts a Date object to a string
toTimeString() Returns the time portion of a Date object in readable form
toUTCString() Converts a Date object, according to universal time, to a string
UTC() Takes a date and returns the number of milliseconds since midnight of January 1, 1970 according to universal time
valueOf() Returns the primitive value of a Date object
Methods whose returns start with "0" Methods whose returns start with "1"
  1. getDay()
  2. getHours()
  3. getMilliseconds()
  4. getMinutes()
  5. getMonth()
  6. getSeconds()
  7. getUTCMonth()
  8. getUTCHours()
  9. getUTCMinutes()
  10. getUTCSeconds()
  11. getUTCMilliseconds()
  12. setHours()
  13. setMilliseconds()
  14. setMinutes()
  15. setMonth()
  16. setSeconds()
  17. setUTCHours()
  18. setUTCMinutes()
  19. setUTCSeconds()
  20. setUTCMilliseconds()
  1. getDate()
  2. getUTCDate()
  3. setDate()
  4. setUTCDate()
Figure 2: Date Object Methods


You should note that some values begin counting with 0 and others begin with 1. For example, January is month 0; December is month 11. Hours, minutes, and seconds all begin with 0. In the next section, we will explore how the Date methods are invoked.

What is the dot-syntax fashion?

It should be noted that every Date object contains information about date and time. With the Date object’s reference stored in the variable name mydate, you can access all date-oriented methods using the dot-syntax fashion that you’re seen in Figure 2 and demonstrated below:

 
var mydate = new Date()
mydate. method()
 
Figure 3: Date Object Methods using the dot


How would set the year using the Date object?

What is setting the year?

With variables such as mydate, your scripts perform calculations or displays of the Date object’s data (some methods extract pieces of the date and time data from the object). If you then want to set some new value into the Date object (such as setting the year to the Date object), you assign the new value to the object by way of the method that lets you set the value:

 
var mydate = new Date()
mydate. setYear( 2011 ) ;
 
Figure 4: Date Object Methods using the dot to set the year


This example shown in Figure 4 isn't the typical JavaScript assignment statement, which has an equals sign operator. However, the dot statement is the way in which methods that set Date object data work. Most of the Date object’s methods are used to obtain parts of the date and time information and for changing the date and time stored in the object. Please use the links found in Figure 2 above to obtain more information on the get and set methods.

The get and set prefix methods

These two sets of methods are easily identifiable because they all begin with the prefix get or set. JavaScript maintains its date information in the form of a count of milliseconds (thousandths of a second) since GMT time January 1, 1970. Any calculations that involve adding or subtracting times and dates should be performed in the millisecond values to ensure accuracy. To obtain the millisecond equivalent for any date and time stored in a Date object, use the dateObj.getTime() method, as in

 
var mydate = new Date()
mydate. getTime() ;
 
Figure 5: Date Object Methods using the dot to get the time


The getTime() method has the word “time” in its name, however, in fact the value it contains the total number of milliseconds since January 1, 1970. This means the value also contains a date. You should be aware that Calendar dates use the actual number that would show up on the wall calendar: The first day of the month is date value 1. For the years before 2000, the year value is whatever the actual year number is, minus 1900. For example, 1996 means the year value returned is 96. But for years before 1900 and after 1999, JavaScript uses a different formula, showing the full year value. This means you have to check whether a year value is less than 100 and add 1900 to it before displaying that year:

 
<head>
<script type="text/javascript">
function get_Year() {
   var mydate = new Date() ;
   var thisYear = mydate.getYear() ;
   if (thisYear < 100) {
      thisYear += 1900 ;
   }

   alert( "Value of myDate after get_Year() " 
           + thisYear  ) ;

   document.getElementById('getYeartxt').innerHTML=
       "<b>Value of myDate.getYear() is " + 
          thisYear + "</b>" ;
}

</script>
</head>
<body>
<button onclick="get_Year()"> value of myDate.getYear() </button>

<div id="getYeartxt"> 

</body>
</html>
 
Figure 6: Date Object Methods using the dot to get the time


After pressing the value of myDate.getYear() button in Figure 6, the following will be displayed.












[HOME] [Consulting] [Design] [Maintenance] [Project] [Testing] [Training] [Turnkey] [Java] [C++] [SQL] [HTML] [JavaScript ]



To contact us

© 2002 - 2010 All Rights Reserved Total Application Works