JavaScript Dates - Get Methods

**chili5** · 10-18-2009 05:24 AM

JavaScript Dates

The JavaScript language contains a very useful Date object for manipulating dates. With this object you can do all sorts of really fun and interesting things.

First we are going to look at how to get a Date object.

Try out this code:

Code:

<script language="javascript">
var theDate = new Date();
</script>

For those of you not familiar with the use of objects. The new keyword means to create a new instance of the Date object. This calls a special function known as the constructor to initialize the object. This constructor that we just used initializes a Date object with the current date.

Now let us display the date to the screen.

Code:

document.write(theDate);

When you run this code you get this result:

Sun Oct 18 2009 05:40:16 GMT-0700 (Pacific Daylight Time)

That is a lot of information that you may not always want. The date class provides methods for being more specific.

The getHours method is very simple it gets the number of hours in the current date object. The getDay method returns the day of the week. The return value will be between 0 and 6 where 0 is Sunday and 6 is Saturday. Most of these methods are pretty self explanatory. One of them that might not make as much sense is the getTime method.

This method returns the number of milliseconds that have past since January 1st 1970 at midnight. This value refers to the UNIX epoch and hence is know as the UNIX timestamp. You may ask so what? What is the point? Well those who are familiar with PHP know that this is the most flexible method of working with dates.

If the user chooses a time, you can store the UNIX timestamp in the database and display it however you like. You can easily change how the date is displayed. You are not restricted to any format of date.

Displaying the Current Time

We are going to use the above methods to display the day of the week and the current time.

Example:

Sunday, October 18, 1992 5:57:05 AM

The first thing we need is to get all the information we need.

Code:

var nMonth = theDate.getMonth();
var nDate = theDate.getDate();
var nDay = theDate.getDay();
var nYear = theDate.getFullYear();
var nHours = theDate.getHours();
var nMinutes = theDate.getMinutes();
var nSeconds = theDate.getSeconds();

By using the methods in the date class we are almost done already. Besides displaying it we are done already. However, we know that nDate and nMonth hold integer values that represent a month. How are we going to convert these to strings?

Since January is 0, I think an array is good to use here.

Code:

var arsMonths = new Array();
arsMonths[0] = "January";
arsMonths[1] = "February";
arsMonths[2] = "March";
arsMonths[3] = "April";
arsMonths[4] = "May";
arsMonths[5] = "June";
arsMonths[6] = "July";
arsMonths[7] = "August";
arsMonths[8] = "September";
arsMonths[9] = "October";
arsMonths[10] = "November";
arsMonths[11] = "December";

Now notice how January is stored at index 0? This means that we get direct access to what the month actually is by using:

Code:

arsMonths[theDate.getMonth()];

We need something similar for the use of days.

Code:

var arsDays = new Array();
arsDays[0] = "Sunday";
arsDays[1] = "Monday";
arsDays[2] = "Tuesday";
arsDays[3] = "Wednesday";
arsDays[4] = "Thursday";
arsDays[5] = "Friday";
arsDays[6] = "Saturday";

We once again get direct access to what day it is by using:

Code:

arsDays[theDate.getDay()];

At this point it is simply a matter of using an output statement to display the date.

Code:

document.write(arsDays[nDay] + ", " + arsMonths[nMonth] + " " + nDate + ", " + nYear + " " + nHours + ":" + nMinutes + ":" + nSeconds);

When you run this code it should show:

Sunday, October 18, 2009 6:11:49

Now what if we want to display if it PM or AM? In a 12 hour clock system, we use PM and AM to show if the time is before or after noon. However you should note that all times are given in 24 hour time.

Changing to 12 hour time

To change to 12 hour time, we simply look if the hours are greater than 12, if they are we take away 12 and set a suffix to PM. Easy.

Code:

if (nHours > 12) {
	nHours -= 12;	
	sSuffix = "P.M.";
} else {
	sSuffix = "A.M.";
}

Now we simply display sSuffix at the very end.

Code:

document.write(arsDays[nDay] + ", " + arsMonths[nMonth] + " " + nDate + ", " + nYear + " " + nHours + ":" + nMinutes + ":" + nSeconds + " " + sSuffix);

Now consider if the time is 5:03:02. JavaScript is not going to display these leading zeroes for you. We have to check if we need them and add them ourselves. This is easy. We need a leading zero if minutes or seconds is less than 10.

Code:

if (nMinutes < 10) {
	nMinutes = "0" + nMinutes;	
}

if (nSeconds < 10) {
	nSeconds = "0" + nSeconds;	
}

That is all. I hope that you have seen that working with dates is fairly simple. You should know that there is more that you can do, but that is a topic for another day.

You can view the results here.