Outputting date

Home : JavaScript > JavaScript example pages > Outputting date

Sometimes you may decide to display current date on your web page. You could do that, for instance, when you display a form to the user and have your JavaScript automatically fill the date field. To display date in JavaScript, you can use the Date object. A Date object contains date information. For instance, the following JavaScript code

<script language="javascript">
var currDate = new Date ();
currDate = currDate.toString();
document.write (currDate);
</script>

prints current date and time information:

But what if you want to display only current month, day, year, or date in some custom format? Well, the date object supports number of methods to obtain specific information about time and date, as summarized in table 1.

Table 1 Date methods
Method	Description
getSeconds()	Returns the seconds
getMinutes()	Returns the minutes
getHours()	Returns the hour in military time
getDate()	Returns the day of the month
getDay()	Returns the day of the week; where 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday
getMonth()	Returns the number of the month, where 0 = January, 1 = February, 2 = March, 3 = April, 4 = May, 5 = June, 6 = July, 7 = August, 8 = September, 9 = October, 10 = November, 11 = December
getFullYear()	Returns the year number
getTime()	Returns the time value, expressed as the number of milliseconds since January 1, 1970.

Note in table 1 above JavaScript starts counting days and months at 0. When the getDay () method returns 0, it indicates the day is 0. When the getMonth () method return 11, it indicates that the month is December. The following shows Date methods in use:

<script language="javascript">
var dateObj = new Date();
document.write ("Current Date: " + dateObj.toString());
document.write ("<br>getSeconds() : " + dateObj.getSeconds());
document.write ("<br>getMinutes() : " + dateObj.getMinutes());
document.write ("<br>getHours() : " + dateObj.getHours());
document.write ("<br>getDate() : " + dateObj.getDate());
document.write ("<br>getDay() : " + dateObj.getDay());
document.write ("<br>getMonth() : " + dateObj.getMonth());
document.write ("<br>getFullYear() : " + dateObj.getFullYear());
document.write ("<br>getTime() : " + dateObj.getTime());
</script>

The above JavaScript code produces:

So if you wanted to control the format of the date, you can use the above mentioned date methods. Let's say we want to display date in a custom form such as: January, 5 2005. To print date in such format, we will use:

getMonth () method to obtain the current month number. We will use an array that contains all the months that corresponds to one of the values returned by the getMonth () method.
getDate () to get the current date.
getFullYear () to get the current year.

The following JavaScript code shows how to display a date in the above mentioned custom format:

<script language="javascript">
var currMonth, currDate, currYear;
var dateObj = new Date();
var monthsArr = new Array();
currMonth = dateObj.getMonth();
currDate = dateObj.getDate();
currYear = dateObj.getFullYear();
monthsArr[0] = "January";
monthsArr[1] = "February";
monthsArr[2] = "March";
monthsArr[3] = "April";
monthsArr[4] = "May";
monthsArr[5] = "June";
monthsArr[6] = "July";
monthsArr[7] = "August";
monthsArr[8] = "September";
monthsArr[9] = "October";
monthsArr[10] = "November";
monthsArr[11] = "December";
document.write (monthsArr[currMonth] + ", " + currDate + " " + currYear);
</script>

In the above JavaScript code, we use an array to store the names of the months. In our document.write () statement, we use the value returned by getMonth () to print the name of the month. The currDate variable prints the current date and the variable currYear prints the value of current year. The following shows the output of the above code:

Feedback | Link to Scripting Master!