Taking a Crack at Flash Components: DateField Components

Informal Tutorial – Intermediate

DateField Components

Learn how to calculate days in between two dates, using two DateField components.

After learning some basic concepts with the DateChooser component, it took me less time to build the ADG calculator using two DateField components. Unfortunately due to some legal concerns I can’t show my finished calculators just yet. I won’t bore you with the details, we’ll just get on with the tutorial.

Once again, using Flash Pro 8 and ActionScript 2.0 in an actions layer. For larger projects I would export the code, but for smaller ones it’s easier not to have to keep track of an .as file and a .swf file.

1. Create three layers: Components, Text and Actions.
2. In the Components layer, drop two DateField components onto the stage, instance names my_df and my_df2. Drag a plain button onto the stage. Give it an instance name of calculate_btn.
3. In the Text layer, create a dynamic text field, instance name message_txt.
4. In the Actions layer, add this code:

import mx.controls.*
var my_df:DateField;
calendar = new Object();
calendar.change = function(eventObj){
	date1 = my_df.selectedDate;
	year = date1.getFullYear();
	month = date1.getMonth();
	day = date1.getDate();
	my_df2.disabledRanges = [{rangeEnd: new Date(year, month, day)}];
}
my_df.addEventListener("change", calendar);

var my_df2:DateField;
calendar2 = new Object();
calendar2.change = function(eventObj){
	date2 = my_df2.selectedDate;
}
my_df2.addEventListener("change", calendar2);

function calculateIt(){
	totalDays = date2 - date1;
	numDays = Math.floor((date2 - date1)/86400000);
	trace("totalDays var = " + totalDays);
	trace("numDays var = " + numDays);
	message_txt.text = "Number of days in between are " + numDays;
}

calculate_btn.onRelease = function(){
		if(isNaN(date1) || isNaN(date2)){
			message_txt.text = "Pick dates.";
		}
		else{
			calculateIt();
		}
}

You can see some of the elements from the DateChooser tutorial are repeated here. Skipping down to the first new line of code:

my_df2.disabledRanges = [{rangeEnd: new Date(year, month, day)}];

this line prevents the second calendar from picking a time in the past of the first chosen date. Handy feature that is often seen when you book your flight/hotel/car online. The calculator button serves two purposes in this example. One is screening out a basic error and the other is to run the

calculateIt()

function. This function is has been simplified to the basics, but this is where you would put the more complex error checking and error messages in. Next we have:

	totalDays = date2 - date1;
	numDays = Math.floor((date2 - date1)/86400000);

While the first line does the actual calculation, the second puts it back into readable form – converting it from milliseconds to days. And that’s it! You can use this plain vanilla .fla for reference if you are having trouble.

Questions, comments and complaints are welcome. Let me know what I can do to improve this tutorial.

Related Posts:

• Taking a Crack at Flash Components: the DateChooser Component
• Flash Resources
• The Heated Debate Continues…

Taking a Crack at Flash Components: the DateChooser Component

An Informal Tutorial – Beginner to Intermediate

I’ve been working on two small calculators. One is a gestation calculator, that predicts the due date of a calf. The other is an Average Daily Gain calculator, that allows the user to plug in their animal’s data and see what the animal’s weight gain has been for a specific period in time.

While neither of these calculators have been refined, I’m posting my code in hopes that they will be a useful reference on how to get the DateField and DateChooser components to work for you. I have been unable to find any tutorials on how to use them and was forced to read up on the Date class and the DateField/DateChooser components.

DateChooser Component

I’m using Flash 8 Pro and ActionScript 2.0 in an actions layer.

1. Build three layers: Components, Text, and Actions.
2. On the Components layer, drop the DateChooser component onto the stage. In the properties panel name the instance my_dc.
3. On the Text layer, add a dynamic text field, instance name message_txt.
4. In the Actions layer, add: (line wraps marked with >>)

import mx.controls.*var my_dc:DateChooser;calendar =

>> new Object();calendar.change = function(eventObj){

eventDate = my_dc.selectedDate;

day = eventDate.getDate();

trace day;

month = eventDate.getMonth();

trace month;

year = eventDate.getFullYear();

trace year;

var endDate = new Date(year, month, (day+283));

message_txt.text = "Your lucky date is " +

>>(endDate.getMonth()+1) +"/"+ endDate.getDate()

>> +"/"+ endDate.getFullYear();

}my_dc.addEventListener("change", calendar);

import mx.controls.*

tells Flash that you want to import all the controls to the ActionScript library. I import all of them in case I am using multiple components for a project. If you only want the DateChooser component, you can use

import mx.controls.DateChooser

instead.

var my_dc:DateChooser;

I’m just now grasping the power of ActionScript 2 and strict datatyping. While it’s good practice to use it all the time, most of my projects are fairly simple. I generally only use it when I am bug hunting or have a larger project.

calendar = new Object();calendar.change = function(eventObj){
eventDate = my_dc.selectedDate;
}
my_dc.addEventListener("change", calendar);

This is how I grabbed the date from the DateChooser component. Every time a user picks a date, the event listener stores the info in the variable eventDate for my use. I manipulate the date here:

day = eventDate.getDate();
trace day;
month = eventDate.getMonth();
trace month;

year = eventDate.getFullYear();

trace year;

day, month, and year are there for the sake of brevity. I could leave them out, but then this

var endDate = new Date(year, month, (day+283));

would become this

var endDate = new Date(eventDate.getFullYear(),
>>eventDate.getMonth(), (eventDate.getDate()+283));

which is ugly and looks complicated. Then you take your results and spit them out in a place the user can read:

message_txt.text = "Your lucky date is " +
>>(endDate.getMonth()+1) +"/"+ endDate.getDate()
>> +"/"+ endDate.getFullYear();

I added some traces just so you can see what ActionScript will spit out for each variable. The date format is mm/dd/yyyy, for any non-U.S. visitors, and one is added to the ending date’s month because of standard array conventions – January is zero to ActionScript. [So January 27, 2007 would look like 0/27/2007 in the display, instead of 1/27/2007]. You can download the stripped-down .fla here if you are having trouble building your own.

Questions, corrections and comments are welcomed. I’ll tackle the DateField component next.

Related posts:

• Taking a Crack at Flash Components II: the DateField Component
• Flash Resources
• The Heated Debate Continues…