jump to navigation

Using the Date Class in Actionscript 3.0 August 14, 2010

Posted by Tournas Dimitrios in Actionscript.

This tutorial will teach you how to use the Data Class in AS3 to retrieve all information related to time (includes dates and days). This tutorial will teach you the basics on how to use and manipulate the date class to retrieve this type of information. This is a beginner level tutorial that doesn’t require any advanced knowledge of ActionScript.

This tutorial is divided into the following sections:

  1. Basic usage of the date class.
  2. Retrieving specific date details.
  3. Retrieving the year, the day of the month, the hours, the minutes, and the seconds.
  4. Retrieving the month and the day of the week.
  5. Updating the time.

Basic Usage of the Date Class :

We will start off by using the date class to show basic date date in the output window. Like the majority of AS3 Classes, before being able to use the Date Class, you will have to instantiate it. We can do this by create a variable and using the new keyword to create the date instance:

var my_date:Date = new Date();

If you would just like to show the basic date details in one piece you can simply use your my_date variable as if it was a String variable. You can use the trace() method display the date in the output window:

var my_date:Date = new Date();

Testing this should display the date in the format similar to the one shown in the image below:

Using the Date Class this way doesn’t provide you with a great level of detail because all the data is displayed as a single string. It is possible to retrieve individual pieces of information by retrieving the specific data needed using the Date properties. We are going to show you how to use the mostly common ones, namely:

  • date – retrieves the day of the month.
  • month – retrieves the month.
  • fullYear – retrieves the year.
  • day – retrieves the day of the week.
  • hours – retrieve the hour.
  • minutes – retrieves the minute.
  • seconds – retrieves the seconds.

There are many other properties and methods for the Date Class, but most of them are not commonly used. Once you learn how to use the properties mentioned in this tutorial you should have no difficulties using other properties. You can learn about other properties by consulting the ActionScript reference.

Retrieving specific date details :

In order to retrieve any of the properties mentioned above, you simply access them directly from the date class instance created. For example, if you want to retrieve the hour, you can do that this way:

var my_date:Date = new Date();

That should output the current hour in 24 hour format. Example: 17.

Most properties works in the same way, but some will not instantly show a meaningful outcome, especially days and months as these are retrieved as zero-relative numbers. We will tell you how to work with basic properties, and then go on to talk about more advanced ones.

Retrieving the full year, the Day of the Month, the Hours, the Minutes, and Seconds :

Retrieving the full year, the day of the month, the hours, the minutes, and the seconds are all straight forward processes. For all of these the value you attempt to retrieve is a number. You can retrieve this number directly by accessing the name of the property through the date class instance this way:

var my_date:Date = new Date();

This should output the full year. Example: 2009.

You can use the same concept to retrieve the following other properties:

  • .date – This property retrieves the day of the month as a number. Example: 20.
  • .hours – This property retrieves the number of hours in 24 hour form. Example: 14.
  • .minutes – This property retrieve the number of minutes. Example: 46.
  • .seconds This property retrieves the number of seconds. Example: 55.

Determining the month and day of the week is a tiny bit more complicated, but we will explain how to do that next.

Retrieving the Month :

Using the month properly directly on an instance of the date object retrieves a numeric value between 0 and 11 indicating the month where January would be 0 and December would be 11. Example:

var my_date:Date = new Date();

This should output the current month of the year as a number between 0 and 11. For example, July would output 6.

To convert this number as the name of the actual month, we can use an array containing month names which we can use to retrieve the proper name. Position of items in an array are zero relative meaning that the first item in the array could be accessed through the number 0, the second at 1, and so forth. This is compatible with our months names as they start from zero as well.

To create an array simply use the var keyword and the square brackets [] operators this way:

var months:Array = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

You can now use the month number retrieving the date class instance to show the actual month name by using the square brackets operator to retrieve the actual name:

var months:Array = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var my_date:Date = new Date();

This should output the actual month name. Example July if the actual month is July.

Retrieving the Day of the Week

Retrieving the proper name of the day of the week is a similar process to the name of the month. Using the property day directly on the date class instance would output a numerical value between 0 and 6 where 0 is Sunday and 6 is Saturday.

To convert this number into the property name, we need to create an array with the names and use it to retrieve the proper day name.

To create an array using the var keyword and the square brackets [] operator this way:

var days:Array = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];

You can now use the number retrieved from the day property to retrieve the appropriate name from the array this way:

[sourcode language=”javascript”]var days:Array = [“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”];

var my_date:Date = new Date();
trace(days[my_date.day]); [/sourcecode]

This should output the proper name of the day. Example: Sunday.

Updating the Time :

One other thing you need to learn about your instance of the Date Class is that it stores the time details of the moment you create that instance. If you create your instance at the beginning of the show and try to retrieve the data 5 minutes later, you will get time details at the time the show started and not the time you access the property.

In order to constant time updates you will need to use a recurring event such as ENTER_FRAME or a Timer Class to have your date instance updates constantly. The code sample below uses the Timer Class to create a new instance of the Date Class each second and display the current time accordingly:

var my_date:Date;

var my_timer:Timer=new Timer(1000);
my_timer.addEventListener(TimerEvent.TIMER, onTimer);

function onTimer(e:TimerEvent):void {
my_date = new Date();
trace(my_date.hours + ":" + my_date.minutes + ":" + my_date.seconds);

Testing this code should output the time in the following format: 14:40:34.



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s