Using Dynamic forms and Date Picker Plugins together.

Using Dynamic forms and Date Picker Plugins together.

Hi,

I have a fieldset that contains 4 elements:

(Date from) (Date to) (other text input) (other text input)

Add a new date range | Delete date range

The date from and to fields have date pickers (using the date picker plugin - http://jqueryui.com/demos/datepicker/) attached to them. 
The add remove function is provided by the dynamic forms plugin - h ttp://sroucheray.org/blog/jquery-dynamic-form/.

The problem is when the new fieldset is added the date picker functionality does not work. The calendar always appears on the first fieldset and the actual calendar function (of picking a date and it populating the text area does not work at all.

I have read a bit about this problem, but not found any solutions, I was hoping someone had managed to fix this problem or could help me work out a solution as it is driving me mad!

Thank you in advance.

Code below HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RSP | Prototype V1 | Launch Page</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript" src="js/jquery-dynamic-form.js"></script>
<script type="text/javascript" src="js/onload.js"></script>

<link href="css/prototype-style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="css/prototype-style-ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="css/prototype-style-ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<h4>Time Period on Proposal</h4>
<form>
<fieldset id="time-period">
<legend>Period 1</legend>
<ol class="form">
<li id="date-from">
<label for="Date From">DATE FROM</label>
<input type="text" class="datepicker">
</li>
<li id="date-to">
<label for="Date to">DATE TO</label>
<input type="text" class="datepicker">
</li>
<li id="percentage_fte">
<label for="percentage FTE">&#37; FTE</label>
<input type="text" name="percentage FTE" class="medium" />
</li>
<li id="sterling_fte">
<label for="sterling FTE">&pound; FTE</label>
<input type="text" name="Staff ID" class="medium" />
</li>
</ol>
</fieldset>
</form>
<p>
<a href="#" id="plus3" style="display: inline;">ADD NEW TIME PERIOD</a> |
<a href="#" id="minus3" style="display: none;">REMOVE TIME PERIOD</a> 
</p>

CODE BELOW ONLOAD.JS 

$(document).ready(function() {

/* MULTI-FIELDS */
 $("#time-period").dynamicForm("#plus3", "#minus3",
        {
            limit:100,
            createColor: 'yellow',
            removeColor: 'red'
        }
        
    ); 
   
/* DATE PICKER */
   
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "images/ui/calendar.gif",
buttonImageOnly: true
});

});


Matt