Recipe 13.9. Adding a Form Control for Collecting Date Information

Problem

You want to add a form control that allows the user to input a date (year, month, and day).

Solution

Use a DateField or DateChooser component (available only in Flash Professional). Alternatively, use a form control for allowing the user to input text and restrict the allowable characters.

Discussion

Flash Professional includes many components that are not part of the standard version, among which are the DateField and DateChooser components. These two components provide you with a convenient way of prompting a user to input a date value. A date chooser displays a calendar (one month at a time) from which the user can select a date. A date field is a slight variation on the date chooser. In fact, you'll notice that the date field actually includes a nested date chooser. However, a date field doesn't require you to display the calendar at all times. Instead, the nested date chooser is hidden except when the user is actively selecting a date. Otherwise, all that the user sees is a field (similar to a text input) with a small button to the right from which the user can open and close the nested date chooser. The date field is often more appropriate when space is a consideration.

You can create a date field or a date chooser by dragging an instance from the Component Inspector panel onto the stage and giving it an instance name via the Property inspector. Both component types have the same set of parameters that you can configure. The default parameter settings are likely suitable for most situations. However, you can adjust the following settings if appropriate:

dayNames

This parameter determines the labels that are applied to the tops of each column, indicating the day names. By default, the values are single letters representing the English names of the days. Be aware that most fonts allow you to display only two characters in each column. However, if you prefer that Thursday be abbreviated as Th rather than simply T, for example, then you can make that change. Probably the most common reason to change the dayNames values is if you are publishing an application to another language in which the names of the days are not given in English. To change the values for dayNames, double-click in the Values column (the right column).

disabledDays

By default, all days in the calendar are selectable. However, in some situations you may want some days of the week to be unselectable. For example, if you are prompting the user to select a date for a class that meets Monday through Friday, disable Saturday and Sunday. When a day of the week is disabled, the user will not be able to select from that column and the column will appear in the unselectable color (gray, by default). You can specify a list of days to disable by number. Each day of the week has a number to which it corresponds. Sunday corresponds to 0, Monday to 1, Tuesday to 2, and so on. To change the values for disabledDays, double-click in the Values column.

firstDayOfTheWeek

The default setting for date field and date chooser is that Sunday is displayed in the first column. You can change which day of the week gets displayed in the first column by changing the firstDayOfTheWeek parameter value. The default value of 0 corresponds to Sunday. You can change the value to any integer value from 0 to 6 to change the order of the columns. For example, if you set the value to 1, then Monday will be displayed as the first column and Sunday will be moved to the last column. Though you can change which column is displayed first, you cannot re-sort the columns such that the days of the week do not appear in order.

monthNames

By default, the names of the months are spelled out in English. You can change the month names that are displayed by changing the values for the monthNames parameter. You may prefer that the months be abbreviated, all in caps, or in a language other than English.

showToday

By default the current date is highlighted on the calendar. You can set the showToday parameter to false if you prefer that the current date is not highlighted.

If you do not have Flash Professional, you can still prompt the user for a date value. However, the standard version does not provide any components specifically for that purpose. Instead, you can use a text input of an input text field. Because you'll be prompting the user for a date value in a specific format, you may want to restrict the allowable characters using the restrict parameter or the restrict property (see Recipe 13.6 for more details). For example, if you want the user to input the date value in the format of YYYY/MM/DD, set the restrict parameter of a text input to 0123456789/ so as to allow all numbers and the forward slash but no other characters.

When you use a date field or a date chooser component, Flash automatically collects the data in the ActionScript Date format. That helps to eliminate a lot of potential error. When you use a text input or an input text field, Flash collects the information as regular text. Although restricting the allowable characters is helpful, it does not force the user to input a valid date. In order to confirm that the user has input a valid date value, you will need to use ActionScript that is rather advanced and beyond the scope of this book. If you are using the FormController component that is discussed in Recipe 13.17 you can use its built-in validation to verify the data.

See Also

Recipe 13.6 and Recipe 13.17