<!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>Untitled Document</title>
<link rel="stylesheet" href="css/jquery.datepick.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type = "text/javascript">
function updateSelected(dates) {
$('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : ' ');
$('#selectedDay').val(dates.length ? dates[0].getDate() : ' ');
$('#selectedYear').val(dates.length ? dates[0].getFullYear() : ' ');
checkLinkedDays();
}
$('#selectedPicker').datepick( {
minDate: '01/01/2001', maxDate: '12/31/2010',
alignment: 'bottomRight', onSelect: updateSelected,
showTrigger: '#calImg'});
$('#selectedMonth, #selectedDay, #selectedYear').change(function() {
$('#selectedPicker').datepick('setDate', new Date ($('#selectedYear').val(), $('#selectedMonth').val() - 1, $('#selectedDay').val()));});
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td>
<select name="selectedMonth" id="selecetedMonth">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select></td>
<td>
<select name="selectedDay" id="selectedDay">
<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">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>
<select name="selectedYear" id="selectedYear">
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
</td>
<td><img id="calImg" src="images/calendar.gif" width="16" height="15" alt="Popup" class="trigger" /></td>
</tr>
</table>
</body>
</html>
So basically we want to connect or rather link the date picker to the dropdown menus (Month/Day/Year). Could anyone help us make this work, we're new about jquery :) thanks.