How to populate tag_capturedetails field using a datepicker

Question

So, here is what I am trying to do. I have the online shop layout template -  Individual Product-Large - being used as the page prior to shopping cart used by the customer to finalize the selection of the product. The product is actually a service with a defined start date. I would like to have the customer select a start date using the datepicker (JQUERY UI Widget) that I have succesfully installed on this page.
My question is probably not a very smart one, but how in the world do you get the information chosen on the date picker to populate the tag_capturedetails field.  I have tried all weekend and have searched everywhere, but have not found any reference to this with a working solution. Any help on this would be super appreciated.  Here is my code for the page as described:
<link type="text/css" href="/css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/Javascript/jquery-ui-1.8.21.custom.min.js"></script>
<h2 style="text-align: left;">
<table>
    <tbody>
        <tr>
            <td rowspan="4" style="background-image: url(http://www.solderlab.com/images/cssimg/blue-gradient.jpg); padding-right: 25px; padding-left: 25px; background-attachment: scroll; padding-top: 10px; text-align: left; vertical-align: top;">
            <h4><span style="font-size: 13px;"><span style="font-weight: normal; font-family: arial; font-size: 13px;">{tag_description}</span><span style="font-weight: normal; font-family: arial; font-size: 13px;">{tag_smallimage}</span></span></h4>
            </td>
            <td style="padding-top: 20px; text-align: center; vertical-align: top;"><span style="font-family: arial; font-size: 16px;">{tag_largeimage}</span></td>
        </tr>
        <tr>
            <td style="white-space: nowrap;"><span style="font-family: arial; font-size: 16px;">Click on an image to expand {tag_poplets}</span> </td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td style="background-image: url(http://www.solderlab.com/gray-gradient.gif); padding-right: 20px; padding-left: 20px; padding-bottom: 10px; text-align: left; vertical-align: top; white-space: nowrap;"><span style="font-family: arial; font-size: 16px;"><span style="font-size: 20px; font-family: arial;">Configure your quote or order: </span><br />
            <span style="font-size: 20px; font-family: arial;"> Product: {tag_name}</span></span>
            <div><span style="font-family: arial; font-size: 16px;">{tag_custom3} {tag_grouping}</span></div>
            <div><span style="font-family: arial; font-size: 16px;">{tag_custom2} {tag_addtocartinputfield}</span></div>
            <div><span name="date" id="details" style="display: none; font-family: arial; font-size: 16px;">{tag_capturedetails, Specify your start date}<br />
            </span></div>
            <meta charset="utf-8" />
            <script>
     $(function() {
$( ".selector" ).datepicker({ altField: "#actualDate" });
//getter
var altField = $( ".selector" ).datepicker( "option", "details" );
//setter
$( ".selector" ).datepicker( "option", "details", "#actualDate" );
          $( "#datepicker" ).datepicker({
               showOn: "button",
               buttonImage: "/images/calendar.gif",
               buttonImageOnly: true
     </script>
            <div class="demo">
            <p><span style="font-family: arial; font-size: 16px;">STEP 3: Select your test start date:
            </span><input type="text" id="datepicker" /></p>
            <p><span style="font-size: medium; font-family: arial; color: #ffffff;">{tag_custom1}<br />
            </span><span style="font-size: medium; font-family: arial; color: #ffffff;">{tag_custom4}</span></p>
            </div>
            <div><span style="font-family: arial; font-size: 16px;">{tag_buynow, Go to Cart}</span></div>
            </td>
        </tr>
    </tbody>
</table>
<table>
</table>
</h2>
<div style="text-align: center;"><em><br />
</em></div>

Answer 1

Hi Mihai
Thank you for your reply. I was beginning to think that no-one could answer this one. Am what I am trying to do even possible?