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 near of its pulldown menu. 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 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!