Problem with JQuery date picker Linked to drop-down
- <html>
- <style type="text/css">@import "jquery.datepick.css";</style>
- <link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
- <script type="text/javascript" src="jquery.datepick.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.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(); // Disable invalid days
- }
-
- $('#selectedPicker').datepick({
- minDate: '01/01/2001', maxDate: '12/31/2010',
- alignment: 'bottomRight', onSelect: updateSelected,
- showTrigger: '#calImg'});
-
- // Update datepicker from three select controls
- $('#selectedMonth,#selectedDay,#selectedYear').change(function() {
- $('#selectedPicker').datepick('setDate', new Date(
- $('#selectedYear').val(), $('#selectedMonth').val() - 1,
- $('#selectedDay').val()));
- });
- </script>
- </head>
- <body>
- <form>
- <select id = 'selectedMonth' name = 'selectedMonth'>
- <option value="01">January</option>
- <option value="02">February</option>
- <option value="03">March</option>
- <option value="04">April</option>
- <option value="05">May</option>
- <option value="06">June</option>
- <option value="07">July</option>
- <option value="08">August</option>
- <option value="09">September</option>
- <option value="10">October</option>
- <option value="11">November</option>
- <option value="12">December</option>
- </select>
- <select id = 'selectedDay' name = 'selectedDay'>
- <option value="01">1</option>
- <option value="02">2</option>
- <option value="03">3</option>
- <option value="04">4</option>
- <option value="05">5</option>
- <option value="06">6</option>
- <option value="07">7</option>
- <option value="08">8</option>
- <option value="09">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>
- <select id = 'selectedYear' name = '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>
- <input type="text" size="10" id = 'selectedPicker' name="text1"/>
- <img id = "calImg" src="images/icon_cal.png" width="16" height="15" alt='' />
- </form>
- </body>
- </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!!