How to Use the Date Object to Integrate JavaScript with HTML - dummies

How to Use the Date Object to Integrate JavaScript with HTML

By John Paul Mueller

Dates are used in all sorts of ways, but the most common techniques you must master in JavaScript applications are formatting and time span calculation. People want dates and times formatted in a way they understand. In addition, dates and times are most useful when used to mark the passage of time, also known as a time span.

Get today’s date right with JavaScript

JavaScript provides standardized methods of displaying dates. You can either use a standard approach for everyone or display time based on a person’s locale. When none of the standard display techniques work, you can build your own custom display. The following example shows some of the most common techniques used to display a date, time, or both.

<script language="JavaScript">
  var Today = new Date();
  document.write("<p>Full Date/Time: " +
    Today.toLocaleString() + "<br />");
  document.write("Full Date: " +
    Today.toLocaleDateString() + "<br />");
  document.write("Date Only: " +
    Today.toDateString() + "<br />");
  document.write("Full Time: " +
    Today.toLocaleTimeString() + "<br />");
  document.write("Time Only: " +
    Today.toTimeString() + "</p>");
  document.write("<p>Custom Date (m/d/y): " +
    (Today.getMonth() + 1) + "/" +
    Today.getDate() + "/" +
    Today.getFullYear() + "<br />");
  document.write("Custom Time (h:m:s:ms): " +
    Today.getHours() + ":" +
    Today.getMinutes() + ":" +
    Today.getSeconds() + "." +
    Today.getMilliseconds() + "</p>");

The example begins by creating a Date object, Today. Whenever you call the Date() constructor without any input value, you get the current date and time. Some languages have a special method or property you call to obtain the current date and time. JavaScript makes things simple by using the technique shown.

In many cases, all you need to do is call a particular method, such as toLocaleString(), to obtain the desired result. However, sometimes you need to build a custom presentation. The two custom examples — Custom Date (m/d/y) and Custom Time (h:m:s:ms) — show how to create a custom date or custom time output using functions such as getMonth().

Notice that when working with getMonth(), you must add 1 to the value because getMonth() outputs its information in the range 0 through 11. This is an example of a situation where you must adjust the JavaScript output to meet a user’s needs.


How to calculate differences in dates with JavaScript

Determining the time span between events is an important part of many applications today. Imagine trying to quantify productivity without knowing a time span in which work is completed. Fortunately, JavaScript makes determining a time span relatively easy. All you need to do is subtract one date or time from another date or time to determine the interval as shown in the following example.

  <h1>Difference Between Dates</h1>
  <script language="JavaScript">
   var ThisDate = new Date("2/1/2013");
   var ThatDate = new Date("3/1/2013");
     "Difference between ThisDate and ThatDate: " +
     ((ThatDate - ThisDate) / 86400000) + " Days");
  <h1>Difference Between Times</h1>
  <script language="JavaScript">
   var ThisTime = new Date(2013, 2, 1, 2, 30);
   var ThatTime = new Date(2013, 2, 1, 2, 51);
     "Difference between ThisTime and ThatTime: " +
     ((ThatTime - ThisTime) / 60000) + " Minutes");

The example creates two date values and two time values. Each of the values actually contains both date and time. The application uses the Date object one way or the other, but that’s the application’s view of the object, rather than a determination the object has made. In fact, you can’t create a time value without also defining a date as part of it.

The example shows two techniques for creating a Date object. You can supply a string or individual values as shown. You can also create a Date object by providing the number of milliseconds since midnight, January 1, 1970.

To determine the time span, you simply subtract one value from the other. The only problem is that the output is in milliseconds and most people don’t understand milliseconds. The example shows how to convert a time span to days or minutes.