Creating a Flash Date Picker for HTML pages

Working with date fields is one of the biggest frustrations for Web developers. You have to make sure that users enter a date in the correct format. For example, in Australia, we put the days first whereas in America the month is entered first. You also have to check dates for invalid entries e.g.  31^st February. 

If your date field is in Flash, MX 2004 Professional includes a DateField component to help with this problem. The component is made up of a text field with a calendar icon on the right hand side. You can't enter text into the text field. Instead, you have to click the icon to bring up a date chooser.  After you have selected a date, the date chooser closes and the value is transferred to the text field. Providing you've set up the component correctly, it's impossible for the user to enter an incorrect value.

But how can you solve this problem if you're working in an HTML page? You can still use Flash to enter dates in your Web forms. In this tutorial, we'll use the DateChooser component that comes with Flash MX 2004 Professional. We'll add an icon to a Web form that pops up a Flash movie containing the DateChooser. Then we'll use some JavaScript to send the value back to the Web form. Once you've developed this movie, you can add the functionality anywhere in your Web projects with a few lines of JavaScript.

This tutorial assumes that you are working with Flash MX 2004 Professional and that know how to work with ActionScript. In this tutorial, you'll learn how to send variables into Flash with FlashVars. You'll also learn how to call a JavaScript function from within Flash as well as how to use JavaScript to add a value to a Web form.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the completed files datePicker_completed.fla, form.htm and datePicker.htm.