Problem with JQuery date picker Linked to drop-down

Problem with JQuery date picker Linked to drop-down

  1. <html>
  2. <style type="text/css">@import "jquery.datepick.css";</style>
  3. <link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
  4. <script type="text/javascript" src="jquery.datepick.js"></script>
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
  8. <script type="text/javascript"> 
  9. function updateSelected(dates) {
  10.     $('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : '');
  11.     $('#selectedDay').val(dates.length ? dates[0].getDate() : '');
  12.     $('#selectedYear').val(dates.length ? dates[0].getFullYear() : '');
  13.     checkLinkedDays(); // Disable invalid days
  14. }
  15.  
  16. $('#selectedPicker').datepick({
  17.     minDate: '01/01/2001', maxDate: '12/31/2010',
  18.     alignment: 'bottomRight', onSelect: updateSelected,
  19.     showTrigger: '#calImg'});
  20.  
  21. // Update datepicker from three select controls
  22. $('#selectedMonth,#selectedDay,#selectedYear').change(function() {
  23.     $('#selectedPicker').datepick('setDate', new Date(
  24.         $('#selectedYear').val(), $('#selectedMonth').val() - 1,
  25.         $('#selectedDay').val()));
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <form>
  31.     <select id = 'selectedMonth' name = 'selectedMonth'>
  32.           <option value="01">January</option>
  33.           <option value="02">February</option>
  34.           <option value="03">March</option>
  35.           <option value="04">April</option>
  36.           <option value="05">May</option>
  37.           <option value="06">June</option>
  38.           <option value="07">July</option>
  39.           <option value="08">August</option>
  40.           <option value="09">September</option>
  41.           <option value="10">October</option>
  42.           <option value="11">November</option>
  43.           <option value="12">December</option>
  44.     </select>
  45.     <select id = 'selectedDay' name = 'selectedDay'>
  46.           <option value="01">1</option>
  47.           <option value="02">2</option>
  48.           <option value="03">3</option>
  49.           <option value="04">4</option>
  50.           <option value="05">5</option>
  51.           <option value="06">6</option>
  52.           <option value="07">7</option>
  53.           <option value="08">8</option>
  54.           <option value="09">9</option>
  55.           <option value="10">10</option>
  56.           <option value="11">11</option>
  57.           <option value="12">12</option>
  58.           <option value="13">13</option>
  59.           <option value="14">14</option>
  60.           <option value="15">15</option>
  61.           <option value="16">16</option>
  62.           <option value="17">17</option>
  63.           <option value="18">18</option>
  64.           <option value="19">19</option>
  65.           <option value="20">20</option>
  66.           <option value="21">21</option>
  67.           <option value="22">22</option>
  68.           <option value="23">23</option>
  69.           <option value="24">24</option>
  70.           <option value="25">25</option>
  71.           <option value="26">26</option>
  72.           <option value="27">27</option>
  73.           <option value="28">28</option>
  74.           <option value="29">29</option>
  75.           <option value="30">30</option>
  76.           <option value="31">31</option>
  77.     </select>
  78.     <select id = 'selectedYear' name = 'selectedYear'>
  79.       <option value="2001">2001</option>
  80.           <option value="2002">2002</option>
  81.           <option value="2003">2003</option>
  82.           <option value="2004">2004</option>
  83.           <option value="2005">2005</option>
  84.           <option value="2006">2006</option>
  85.           <option value="2007">2007</option>
  86.           <option value="2008">2008</option>
  87.           <option value="2009">2009</option>
  88.           <option value="2010">2010</option>
  89.     </select>
  90.      <input  type="text" size="10" id = 'selectedPicker' name="text1"/>
  91.      <img id = "calImg" src="images/icon_cal.png" width="16" height="15" alt='' />
  92. </form>
  93. </body>
  94. </html>
basically we want to link the drop-down for month, day and year to the datepicker.. like the example set in this link: linked to drop down. And as you can see, we can't make the code work.. does anyone have an idea how to fix this? Thanks!!