Write the current date using JavaScript

Sunday, November 27th, 2005 by Chris Jason
4 Comments

Using the date() object in JavaScript, we can print the current date in a variety of popular formats.

The JavaScript date() object

In JavaScript, the date() object stores the current date in raw form. We can write the date in its raw form by using the following code:

<script type="text/javascript">document.write(date());</script>

The output looks like this:

Sun Nov 27 14:10:51 EST 2005

As shown in this example, the output of the date() object is not very "clean." In most cases, we would want to output the date in a more user-friendly format. To achieve this, we initialize the date() object (as done above), then modify the output as needed using built-in methods of the date() object.

Write the day using JavaScript

To write the day using JavaScript, we need to initialize the date() object, use the getDay method to return a numerical value corresponding to the current day, then output the day in whatever format we choose. This is actually much simpler than it sounds.

<script type="text/javascript">
today=new Date(); // Initialize Date in raw form
day = today.getDay(); // Get the day in number form (0,1,2,3,etc.)

// Make day number value correspond to actual day name
var dayName=new Array(7)
dayName[0]="Sunday";
dayName[1]="Monday";
dayName[2]="Tuesday";
dayName[3]="Wednesday";
dayName[4]="Thursday";
dayName[5]="Friday";
dayName[6]="Saturday";

document.write (dayName[day]); // Write the day
</script>

Write the date using JavaScript

We might also need to write the date. This is accomplished by initializing the date() object, getting the current date in numerical form by using the getDate method, than outputting the date in whatever format we choose. In this example, I want to write the date in number form, but I also want to append the appropriate suffix corresponding to the date (i.e. "th", "st", "nd", etc.).

<script type="text/javascript">
today=new Date(); // Initialize Date in raw form
date=today.getDate(); // Get the numerical date

// Add suffix to date (1st, 2nd, 4th, etc.)
if (date==1) suffix=("st");
else if (date==2) suffix=("nd");
else if (date==3) suffix=("rd");
else if (date==21) suffix=("st");
else if (date==22) suffix=("nd");
else if (date==23) suffix=("rd");
else if (date==31) suffix=("st");
else suffix=("th");

document.write (date + suffix); //Write the date
</script>

Write the month using JavaScript

We’re only missing two components of a complete date: the month and year.

To write the month, we need to initialize the date() object, get the current month in raw form (0,1,2,3,4,etc.) by using the getMonth method, then output the date in whatever form we like.

<script type="text/javascript">
today=new Date(); // Initialize Date in raw form
month=today.getMonth()+1; // Get the month

// Make month number correspond to month name
if (month==1) monthName=("January");
else if (month==2) monthName=("February");
else if (month==3) monthName=("March");
else if (month==4) monthName=("April");
else if (month==5) monthName=("May");
else if (month==6) monthName=("June");
else if (month==7) monthName=("July");
else if (month==8) monthName=("August");
else if (month==9) monthName=("September");
else if (month==10) monthName=("October");
else if (month==11) monthName=("November");
else monthName=("December");

document.write (monthName); //Write the month
</script>

Write the year using Javascript

To write the current year, we need to initialize the date() object, then use the getYear method to return the year. This is the easiest part of writing the date in JavaScript.

<script type="text/javascript">
today=new Date(); // Initialize Date in raw form
year=today.getYear(); // Get the year

document.write (year);
</script>

Write the full date using JavaScript

So far, we’ve learned to get the day, date, month, and year in JavaScript. To write the full date, all we need to do is combine the examples above. The following code will output the date in the form of "Sunday, November 27th, 2005":

<script type="text/javascript">
today=new Date(); // Initialize Date in raw form
date=today.getDate(); // Get the numerical date
year=today.getYear(); // Get the year
day = today.getDay(); // Get the day in number form (0,1,2,3,etc.)
month=today.getMonth()+1; // Get the month

// Make day number value correspond to actual day name
var dayName=new Array(7)
dayName[0]="Sunday";
dayName[1]="Monday";
dayName[2]="Tuesday";
dayName[3]="Wednesday";
dayName[4]="Thursday";
dayName[5]="Friday";
dayName[6]="Saturday";

// Add suffix to date (1st, 2nd, 4th, etc.)
if (date==1) suffix=("st");
else if (date==2) suffix=("nd");
else if (date==3) suffix=("rd");
else if (date==21) suffix=("st");
else if (date==22) suffix=("nd");
else if (date==23) suffix=("rd");
else if (date==31) suffix=("st");
else suffix=("th");

// Make month number correspond to month name
if (month==1) monthName=("January");
else if (month==2) monthName=("February");
else if (month==3) monthName=("March");
else if (month==4) monthName=("April");
else if (month==5) monthName=("May");
else if (month==6) monthName=("June");
else if (month==7) monthName=("July");
else if (month==8) monthName=("August");
else if (month==9) monthName=("September");
else if (month==10) monthName=("October");
else if (month==11) monthName=("November");
else monthName=("December");

// Write date
document.write(dayName[day] + ", " + monthName + " " + date + suffix + ", " + year);
</script>

Final thoughts on using JavaScript dates

If you ever need to write the date on a Web page, I’d actually recommend using JavaScript as opposed to server-side languages like ASP, PHP, ASP.NET, or Coldfusion. The reason is that dates written in server-side languages use the time of the Web server, not the user’s local machine. This can be problematic if your Web server is in California and most of your users are in New York. While not likely, there’s a possibility a user could visit your page late at night and see an incorrect date, since the date on screen is not based on their location, but rather that of the Web server.

Further reading

Article Comments

  • Posted by: John Arrowsmith | January 2nd, 2006

    I am just redeveloping our Parish Web Site and appreciate your date script.
    I have added the following two lines to cope with Opera and Netscape displaying the correct year:

    // Make year number correspond to correct year according to Browser
    if (year<1900) year=(year+1900)
    else if (year>2000) year=year

    John

  • Posted by: Christopher Jason | January 2nd, 2006

    Thanks John for the Y2K fix.

  • Posted by: Ciana | December 19th, 2006

    I am redesigning our church web site and used your date script. How could I modify the script to change the font size and color?

  • Posted by: Christopher Jason | December 19th, 2006

    Ciana-

    You could use inline styling, as I’ll do here. But I’d recommend readiny my tutorial on Using Basic CSS.

    You could change the last line to the following, which would print green arial text. Substitute fonts and colors as needed.


    document.write("<span style='color:green; font-size:10px; font-family:arial;'>"+dayName[day] + ", " + monthName + " " + date + suffix + ", " + year + "</span>");

Post a Comment

You must be logged in to post a comment.