///JavaScript – Formatted Date, Back, Forward Buttons

JavaScript – Formatted Date, Back, Forward Buttons

JavaScript – Formatted Date, Back, Forward Buttons


Today you’ll learn how to display date in the format 17 August, 2001 on your web page. As already elucidated in the preceding section, simply using the Date() function isn’t much help. And anyway, there is no function in JavaScript that gives months in words like January, February, etc.

The script given below displays the date of the desired format. First go through the script, copy-paste-run it on your browser, and then you can go through the explanation.

<script language="JavaScript">

var allmonths=new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var tdate=new Date();
var wholedate;

wholedate=tdate.getDate() + " " + allmonths[tdate.getMonth()] + ", " + tdate.getYear();

document.write (wholedate);


We first need to declare an array to store all the month names, so that later on they can be retrieved according to a number attained by using the function toMonth().

There are many ways of filling up an array with values. A traditional way is:

var allmonths = new Array(12);

and so on till


Later on, we have, according to the above code,

for(var i=0; i<12; i++) {…}

The problem here is, along with repetitively having to type in the individual cell, that you have to depend on actual numbers, which goes contrary to the general rule in the programming circles, that make your programs as general as possible, so that they can be used in any way, or by other programs.

So the correct way is,

var allmonths=new Array("January", "February", …, "December");

and then

for(var i=0; i<allmonths.length; i++) {…}

Using this way, we can add as many values as we want (of course when adding months, we can’t go beyond a certain number), and then retrieve the length of the array through ArrayName.length.

It’s a very cutely simple program. We are using a few functions to extract various components of a class Date().

First we declare a new, date type variable. If we declare a variable of a particular class type, the variable inherits all the methods and sundry features of the parent class.

So the latest date (it’s your computer’s system date) goes like

var tdate=new Date();

After this, getDate() extracts the day (1,2,3,…), getMonth() extracts the month, and getYear() extracts the year out of tdate, that stores the current date.

Later on, we use the value returned by getMonth(), to retrieve the name from the array, represented by that number – allmonths[tdate.getMonth()]. So if the month is March, tdate.getMonth() would return 2, and further, allmonths[2] returns March. You might tend to think that if March is the third month of the year, how come getMonth() gets 2? Well, we have learnt that the lower bound of an array always starts with zero, and getMonth() retrieves the value from an array. So 2, in reality, represents the third position in an array.

In the end, all the returned values are concatenated and stored as one single string in wholedate, which is later displayed using

document.write (wholedate);


In your browser, you can see Back and Forward buttons. Back takes you to the previous page, from where you came to the current page, and Forward takes you to the next page, from where you came to the previous page.

It might happen that your visitors are not aware of these buttons, or just don’t know for what exact purpose they are used.

You can use your own buttons on your web page to achieve the equivalent feat, like this:

<input type="Button" value="BACK" onclick="history.go(-1);">
<input type="Button" value="FORWARD" onclick="history.go(1);">

2010-05-26T10:59:44+00:00 June 1st, 2005|JavaScript|0 Comments

About the Author:

Amrit Hallan is a freelance web developer. You can checkout his website at http://www.bytesworth.com. For more such articles join BYTESWORTH REACHOUT at http://www.bytesworth.com/br/default.asp or if you have a web dev related question then post it at http://www.business180.com/index.php

Leave A Comment