This tutorial is based on the following software environment.

Windows XP Professional, Lotus Notes Client 6, Domino Server 6, Internet Explorer 7

The date picker is customized by LDD user and developed by Kedar R Bhave.
http://www-10.lotus.com/ldd/sandbox.nsf/ByCategory/c1a3c1f8e69eddbd85256996006e5bd0?OpenDocument
http://www.softricks.com

Create a new database in server Go to File–>Database–>New. Give the file name as test.nsf. Open the database in Domino designer.

We need the following resources. Five images and one JavaScript file. Just download them in your local directory.

                          date-picker.js

Add all the images as Image Resources under shared resources. Add the JavaScript file date-picker.js as new File Resource under shared resources.

Create new form. In form properties set the Name as Employee. Create a table with two rows and two columns. In table properties set the width of cells as 2.0 in all cells. Now enter text in left cells. Type Name in top left cell and Date of birth in bottom left cell. Create two fields. First create a text field in top right cell. Name it as EmployeeName.Select type as Text in field properties.

Create Date/Time field in bottom right cell. Name it as EmployeeDOB. Select type as Date/Time. Now insert the image resource calendar_pick.gif just after EmployeeDOB field. In onClick event of image under programmers pane, select Web from Run list and then JavaScript.Write down the following code.

show_calendar('forms[0].EmployeeDOB')

Here we call the JavaScript function show_calendar and pass EmployeeDB object as parameter. If you have another date field, passes the field’s name as parameter. In the onFocus event of EmployeeDOB field, select Web from Run list and then JavaScript. Enter the following code. This prevents user from manually entering the date field.

blur();

Now we have to include the JavaScript file in the form. Just type the following code snippet under HTML Head Content of Employee form in programmers pane Objects tab.

"<script language=\"JavaScript\" src=\"/"+
@ReplaceSubstring(@Subset(@DbName; -1); "\\"; "/")+"/date-picker.js\" >"+
"</script>"

Save the form.

Open the form in web. http://<server-name>/Test.nsf/Employee?OpenForm If you have created your db under subfolder of data directory you may include the same in url. Check the date picker.

Cheers!