Hi, I need help adding the jquery date picker to my existing code, but not reconstructing the whole HTML file.
my code, <!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>calenar</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/ 1.3.2/ jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/ 1.7.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></ script> <script type="text/javascript"> $(function(){ // #datepickers $("#datepicker").datepicker({showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true}); }); </script> </head> <body> <p>Depart:</p> <table cellpadding="2" cellspacing="0" border="0"> <tr> <td><select name="departureMonth" onchange="javascript:dmddChange (document.hotForm.departureMonth,document.hotForm.departureDay);"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6">July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select></td> <td><select name="departureDay" onchange="dmddChange (document.hotForm.departureMonth,document.hotForm.departureDay)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27" selected="selected">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select></td> <td><a href="javascript:openCalendar('hotForm', 'departure');"><img src="http://affiliate.travelnow.com/ searchboximages/blueFormCalendar.gif" border="0"/></a></td> </tr> </table> <p>Going to:</p> <table cellpadding="2" cellspacing="0" border="0"> <tr> <td><select name="departureMonth" onchange="javascript:dmddChange (document.hotForm.departureMonth,document.hotForm.departureDay);"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6">July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select></td> <td><select name="departureDay" onchange="dmddChange (document.hotForm.departureMonth,document.hotForm.departureDay)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27" selected="selected">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select></td> <td><a href="javascript:openCalendar('hotForm', 'departure');"><img src="http://affiliate.travelnow.com/ searchboximages/blueFormCalendar.gif" border="0"/></a></td> </tr> </table> </body> </html> working site. http://boxwithsand.0fees.net/test-calendar.html as you can see there is an icon of a calendar and a pulldown menu of month and day. The pulldown menu Is the element I want to retain, The calendar icon is calling for (javascript:openCalendar) it's a pop window type of calender (I kinda hate it, and in my opinion it looks very ugly) now I want it to be replaced with the JQuery UI Datepicker. How can that be implemented? I think my main problem is updating the values of the pulldown menu ounce the user have choosen a date from the Jquery datepicker. Thanks You!