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…