I'd like to know if anybody has modified their html.pl to allow date entry from a calendar (by clicking on a date) rather than typing in a year, month and day.

Well... I've figured out this is called a "date picker" and there are dozens (if not hundreds) of them available as javascripts. So let me rephrase my question:

Has anyone successfully modified the html.pl file so that add/modify forms are generated with the "date picker" embedded in the form. I want to make it super easy for my users to fill in the date fields.

Hows that?

I did it! Boy... does it make date entry easier. No more worrying about users getting the format wrong. Just click on a calendar day and maybe click on a different month or year. Let me know if anybody wants me to type up a how-to on this. The only problem is that there are dozens of date picker javascripts out there, many are free, but my directions will only work with the product I chose. The product I chose was free. I'll have a demo page available to look at until mid February 2005.

Please do... I tried by using I-Frame and then onLoad in the body of page pulled into the I-Frame and it got messy...

Very curious as to how you did it.

I just sent an email to navsurf to see if it would be OK to post the code I used. Although the date picker license agreement says it's free for personal use, I want to make sure it's OK to post my setup without violating the license agreement.

This is how I embedded a date picker calendar in my html.pl file. I chose acecalendar version 1.2 by NavSurf because it was free for personal use and because it was already set up to use a separate year, month and day field.

1) Obtain the acecalendar.js file from the NavSurf web site.

2) Create a datepicker.js file that contains the settings for the calendar. I have included mine below. See documentation on software vendor's site for customization details. Note: I am using separate Year, Month and Day fields.

3) Copy the acecalendar.js and datepicker.js files to your web server and note their location as you will need this information later.

4) Edit your html.pl file and modify every subroutine that generates a page where you want the date picker to show up. I modified "sub html_add_form" and "sub html_modify_form" There may be other forms that need to be modified.

Here are the modifications that need to be made.

Add a form id to the form tag...

BEFORE --> <form action="$db_script_url" method="post">
AFTER --> <form id="myForm" action="$db_script_url" method="post">

Add the two javascript tags that call the date picker javascript. They MUST be added below the form tag you just modified.

<p><center><$font_title><b>
Add a New Record
</b></font></center><br>
<script type="text/javascript" language="JavaScript1.2" src="/path to script/acecalendar.js"></script>
<script type="text/javascript" language="JavaScript1.2" src="/path to script/datepicker.js"></script>

Modify the "path_to_script" in the above script tags to point to the location where you stored yout js files.

Contents of datepicker.js file start below:

oCal_2 = new AceCalendar();
oCal_2.setName("oCal_2");
oCal_2.setFont("Arial, Helvetica, sans-serif", "10pt");
oCal_2.setFormName("myForm");
oCal_2.setFirstDay("1");
oCal_2.setFieldNames("syear", "smonth", "sday" );
oCal_2.setStyle(0, "#FFFFFF", "#FFFFFF", "#000000", 0, 0);
oCal_2.setStyle(1, "#FFFFFF", "#FFFFFF", "#000000", 0, 0);
oCal_2.setStyle(2, "#CECECE", "#CECECE", "#000000", 0, 0);
oCal_2.setStyle(3, "#CECECE", "#CECECE", "#000000", 0, 0);
oCal_2.setStyle(4, "#000099", "#000099", "#FFFFFF", 0, 0);
oCal_2.display("", "", "");
oCal_2.setAction = function()
{
var aMonths = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
var oForm = document.forms.myForm;
if (oForm != null)
{
oForm.elements.Year.value = this.getYear();
oForm.elements.Month.value = aMonths[this.getMonth()];
oForm.elements.Day.value = this.getDate();
}
}

END OF DATE PICKER JS FILE (don't include this line)

Notes:

1) The form id you added in the html.pl file needs to match the "setFormName" parameter in the date picker.js file.

2) If you want the date picker program to automatically set itself to the current value of your dbman fields, leave the oCal_2.display values blank as listed in the example. If your dbman fields already have set values the calendar will set itself to those existing values.

3) In order to have the calendar automatically update the values of your dbman fields, you have to make sure the oForm lines in datepicker.js include the EXACT spelling of your dbman field names.
oForm.elements.DBMAN-YEAR-FIELD-NAME.value = this.getYear();
oForm.elements.DBMAN-MONTH-FIELD-NAME.value = aMonths[this.getMonth()];
oForm.elements.DBMAN-DAY-FIELD-NAME.value = this.getDate();

4) I did not put much thought in the placement of my date picker and I did not include formatting so it lined up with the rest of the page. You will have to experiment with placement to make it look better. This was just a quick and dirty hack to install the calendar and test it's viability. See the software vendor's web site for more info on customizing the calendar.

5) As with any modification, test this on a development system before attempting to integrate on a production system. AND MAKE A BACKUP FIRST!