The Date Chooser is the new name for the Calendar component that was
introduced in Flash MX. Using it is very simple, as the following example
will show.
Start a new FLA. Use the screenshot below as a guide when laying out
your Flash application in the following steps.
Create a new layer. Label the topmost layer Actions and the one under
it, Components.
Drag a TextArea component and place it at the top of the Stage. You
will use this to display the selected date in the Date Chooser. Give
the TextArea component the instance name statusMessage. In its text
property, type in the default text to display when the application first
runs. In this case, this is: "Select dates on the DateChooser component,
below."
Drag a DateChooser component on Stage and place it underneith the
TextArea component. Give it the instance name myDateChooser and take
a look at the various parameters you have available for this component.
Using the dispabledDays parameter, you can set dates that appear as
disabled (which the user cannot select), you can also specify the first
day of the week (defaults to 0, which is Sunday) and specify the names
of the Months (in our own language, for example). If showToday is set
to true (default), the current date will appear highlighted in the component.
In Frame 1 of the Actions Layer, enter the following code:
myDateListener = new Object();
myDateListener.change = function(eventObj)
{
var eventSource = eventObj.target;
var theSelectedDate = eventSource.selectedDate;
// compose the message
var msg = "You selected " + theSelectedDate;
// display the message
statusMessage.text = msg;
}
myDateChooser.addEventListener("change", myDateListener);
Test the movie and click around on the calendar control to see the
status message change. You can interact with the final application below.
If you have been reading this tutorial from the beginning, you will no
doubt have noticed some striking similarities in the way you use the various
components. Just like the List Box, Combo Box and Grid components, the
DateChooser component broadcasts a change event. You can look at the selectedDate
property in the target of the event object that gets passed to the change
event handler to learn the date that the user selected (this is a regular
date object.) You may be balking the complexity of the dates that get
displayed in the TextArea component. It's easy to make them fit for human
consumption by formatting them. To do this:
Replace the script in Frame 1 of the Actions layer with the following
one:
myDateListener = new Object();
myDateListener.change = function(eventObj)
{
var eventSource = eventObj.target;
var theSelectedDate = eventSource.selectedDate;
// format the date
var theDate = theSelectedDate.getDate();
var theMonth = theSelectedDate.getMonth() + 1;
var theYear = theSelectedDate.getFullYear();
var formattedDate = theDate + "/" + theMonth + "/"+ theYear;
// compose the message
msg = "You selected " + formattedDate;
// display the message
statusMessage.text = msg;
}
myDateChooser.addEventListener ("change", myDateListener);
Test the movie, click on some dates and note the formatted output
in the Text Area component. You can interact with the version below
to see this.
Download Source Files (5MB!) 
go to previous page 
