Pin Me

How to Display Today's Date with JavaScript

written by: Sam OBrien•edited by: Amber Neely•updated: 9/13/2010

You don't have to master the Javascript scripting language in order to take advantage of the Javascript today date function to add the current date to your website.

  • slide 1 of 3

    Understanding the JavaScript Today Date Function

    If you're just starting out in web development and planning to use the JavaScript today date function to display the current date on a web page, you should understand that the date that will be displayed is determined by the date of the computer of the person viewing the page. We're speaking of client side javascript; so, due to the different time zones, not every client computer will display the exact date at the exact same time. This isn't much of a consideration if only displaying the date. However, if you also decide to display the time, this might be of greater concern. A need to display, on the client computer, the exact date and time of the region of the server that holds the web pages would require a server side script like PHP or PERL.

    You'll also need a good solid understanding of basic programming to understand the script I'll be sharing instead of just copying and pasting it. This article assumes you know what a variable is, what an array is, how to declare and initialize variables, and how to embed your script in an (X)HTML document. This knowledge will enable you to easily learn and use the Javascript today date function.

  • slide 2 of 3

    An Explanation of the Script

    If you click on the screen shots below, you can see the simple script I wrote and the results that appear in a browser, Mozilla Firefox in this case. The script is operational; however, since it's for demonstration purposes, I used the simple opening and closing HTML tags (<HTML> and </HTML>); you don't want to be so careless with live web pages. Take the time to declare a document type such as strict or transitional.

    You should recognize lines one thru three of the script; they are basic HTML tags. Line four begins the script tag followed by the beginning of the character data (CDATA) section in which the first "section" of the script is placed. Technically speaking, the CDATA section isn't needed here because I'm not using (X)HTML as this isn't a live script. I've included it, however, because I was trained to always code in (X)HTML, not HTML, preferably according to the strict DTD. Use of the CDATA section allows you to validate your web pages that contain embedded javascript scripts; so, it's a good idea to get used to using it.

    Next, I created and initialized a Date object called "currentDate;" this is necessary to use the Javascript today date function. Of course, you can name your object what you want. Dates are understandably considered special data as dates must be represented with order; for example, we don't say something like, "Today is 2010, the 11th, Sunday, September." We use order and say something like, "Today is Saturday, September 11th, 2010." Also, while dates do make use of numbers, they also make us of strings. Therefore, it's easy to see how they are special data. Once you create and initialize the Date object, you'll have access to the many methods available for setting and getting the various parts of the date.

    I then declared and initialized arrays to hold the names of the months and the names of the days of the week; I abbreviated them, but you don't have to. Notice that this is all done in the head of the document, not the body. We're now ready to print the date using document.write. The methods used in this script are getDate which returns the date's day of the month, getDay which returns the day of the week, getMonth for the return of the month, and getFullYear which returns a full four digit year. There are a good number of other methods you might want to use; but, these are the ones needed for this script. Finally, we have the closing of the CDATA section and the closing script tag.

    It's very useful to know how to use the Javascript today date function. Remember, the Date object also includes methods for you to include the time as well as the date on a web page.

  • slide 3 of 3

    The Javascript Today Date Function Code and Results

    The CodeThe Results