941,498 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > jquery date picker link to dropdown
Ad:
Permalink
Jul 20th, 2010
0

jquery date picker link to dropdown

Expand Post »
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link rel="stylesheet" href="css/jquery.datepick.css" type="text/css" />
  7. <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
  8. <script type="text/javascript" src="js/jquery.datepick.js"></script>
  9.  
  10. <script type = "text/javascript">
  11.  
  12. function updateSelected(dates) {
  13. 	$('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : ' ');
  14. 	$('#selectedDay').val(dates.length ? dates[0].getDate() : ' ');
  15. 	$('#selectedYear').val(dates.length ? dates[0].getFullYear() : ' ');
  16. 	checkLinkedDays();
  17. }
  18.  
  19. $('#selectedPicker').datepick( {
  20. 							  minDate: '01/01/2001', maxDate: '12/31/2010',
  21. 							  alignment: 'bottomRight', onSelect: updateSelected,
  22. 							  showTrigger: '#calImg'});
  23.  
  24. $('#selectedMonth, #selectedDay, #selectedYear').change(function() {
  25. $('#selectedPicker').datepick('setDate', new Date ($('#selectedYear').val(), $('#selectedMonth').val() - 1, $('#selectedDay').val()));});
  26.  
  27. </script> 
  28.  
  29. </head>
  30.  
  31. <body>
  32. <table width="200" border="1">
  33.   <tr>
  34.     <td>
  35.         <select name="selectedMonth" id="selecetedMonth">
  36.           <option value="Jan">Jan</option>
  37.           <option value="Feb">Feb</option>
  38.           <option value="Mar">Mar</option>
  39.           <option value="Apr">Apr</option>
  40.           <option value="May">May</option>
  41.           <option value="Jun">Jun</option>
  42.           <option value="Jul">Jul</option>
  43.           <option value="Aug">Aug</option>
  44.           <option value="Sep">Sep</option>
  45.           <option value="Oct">Oct</option>
  46.           <option value="Nov">Nov</option>
  47.           <option value="Dec">Dec</option>
  48.     </select></td>
  49.     <td>
  50.         <select name="selectedDay" id="selectedDay">
  51.           <option value="1">1</option>
  52.           <option value="2">2</option>
  53.           <option value="3">3</option>
  54.           <option value="4">4</option>
  55.           <option value="5">5</option>
  56.           <option value="6">6</option>
  57.           <option value="7">7</option>
  58.           <option value="8">8</option>
  59.           <option value="9">9</option>
  60.           <option value="10">10</option>
  61.           <option value="11">11</option>
  62.           <option value="12">12</option>
  63.           <option value="13">13</option>
  64.           <option value="14">14</option>
  65.           <option value="15">15</option>
  66.           <option value="16">16</option>
  67.           <option value="17">17</option>
  68.           <option value="18">18</option>
  69.           <option value="19">19</option>
  70.           <option value="20">20</option>
  71.           <option value="21">21</option>
  72.           <option value="22">22</option>
  73.           <option value="23">23</option>
  74.           <option value="24">24</option>
  75.           <option value="25">25</option>
  76.           <option value="26">26</option>
  77.           <option value="27">27</option>
  78.           <option value="28">28</option>
  79.           <option value="29">29</option>
  80.           <option value="30">30</option>
  81.           <option value="31">31</option>
  82.         </select>
  83.     </td>
  84.     <td>
  85.         <select name="selectedYear" id="selectedYear">
  86.           <option value="2001">2001</option>
  87.           <option value="2002">2002</option>
  88.           <option value="2003">2003</option>
  89.           <option value="2004">2004</option>
  90.           <option value="2005">2005</option>
  91.           <option value="2006">2006</option>
  92.           <option value="2007">2007</option>
  93.           <option value="2008">2008</option>
  94.           <option value="2009">2009</option>
  95.           <option value="2010">2010</option>
  96.         </select>
  97.     </td>
  98.     <td><img id="calImg" src="images/calendar.gif" width="16" height="15" alt="Popup" class="trigger" /></td>
  99.   </tr>
  100. </table>
  101. </body>
  102. </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.
Similar Threads
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
ekseks is offline Offline
61 posts
since May 2010
Permalink
Jul 21st, 2010
0
Re: jquery date picker link to dropdown
it's like dropdown 1: Month dropdown 2: Day dropdown 3: Year then DATEPICKER... as i change the values of the boxes it also affects the date of the datepicker vice-versa as i change the date on my date picker the dropdown values also automatically changes
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
ekseks is offline Offline
61 posts
since May 2010
Permalink
Jul 21st, 2010
0
Re: jquery date picker link to dropdown
pls me and my team need this badly can someone help?
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
ekseks is offline Offline
61 posts
since May 2010
Permalink
Jul 21st, 2010
0
Re: jquery date picker link to dropdown
can someone please help us we need this for a project within 36 hours before submittion thanks
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
ekseks is offline Offline
61 posts
since May 2010
Permalink
Jul 22nd, 2010
0
Re: jquery date picker link to dropdown
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
  9. <script type="text/javascript" src="jquery.datepick.js"></script>
  10.  
  11. <style type="text/css">@import "jquery.datepick.css";</style>
  12.  
  13. <script type="text/javascript">
  14.  
  15. //Update three select controls to match a datepicker selection
  16. function updateSelected(dates) {
  17. 	$('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : ' ');
  18. 	$('#selectedDay').val(dates.length ? dates[0].getDate() : ' ');
  19. 	$('#selectedYear').val(dates.length ? dates[0].getFullYear() : ' ');
  20. 	checkLinkedDays();
  21. }
  22.  
  23. $('#selectedPicker').datepick( {
  24. 							  minDate: '01/01/2001', maxDate: '12/31/2010',
  25. 							  alignment: 'bottomRight', onSelect: updateSelected,
  26. 							  showTrigger: '#calImg'});
  27.  
  28. //Update datepicker from three select controls
  29. $('#selectedMonth, #selectedDay, #selectedYear').change(function() {
  30. $('#selectedPicker').datepick('setDate', new Date ($('#selectedYear').val(), $('#selectedMonth').val() - 1, $('#selectedDay').val()));});
  31.  
  32. </script>
  33.  
  34. <title>LOL</title>
  35. </head>
  36.  
  37. <body>
  38.  
  39. <select id="selectedMonth">
  40. 	<option value="1">Jan</option>
  41.     <option value="2">Feb</option>
  42.     <option value="3">Mar</option>
  43.     <option value="4">Apr</option>
  44.     <option value="5">May</option>
  45.     <option value="6">Jun</option>
  46.     <option value="7">Jul</option>
  47.     <option value="8">Aug</option>
  48.     <option value="9">Sep</option>
  49.     <option value="10">Oct</option>
  50.     <option value="11">Nov</option>
  51.     <option value="12">Dev</option>
  52.     </select>
  53. <select id="selectedDay">
  54. 	<option value="1">1</option>
  55.     <option value="2">2</option>
  56.     <option value="3">3</option>
  57.     <option value="4">4</option>
  58.     <option value="5">5</option>
  59.     <option value="6">6</option>
  60.     <option value="7">7</option>
  61.     <option value="8">8</option>
  62.     <option value="9">9</option>
  63.     <option value="10">10</option>
  64.     <option value="11">11</option>
  65.     <option value="12">12</option>
  66.     <option value="13">13</option>
  67.     <option value="14">14</option>
  68.     <option value="15">15</option>
  69.     <option value="16">16</option>
  70.     <option value="17">17</option>
  71.     <option value="18">18</option>
  72.     <option value="19">19</option>
  73.     <option value="20">20</option>
  74.     <option value="21">21</option>
  75.     <option value="21">21</option>
  76.     <option value="22">22</option>
  77.     <option value="23">23</option>
  78.     <option value="24">24</option>
  79.     <option value="25">25</option>
  80.     <option value="26">26</option>
  81.     <option value="27">27</option>
  82.     <option value="28">28</option>
  83.     <option value="29">29</option>
  84.     <option value="30">30</option>
  85.     <option value="31">31</option>
  86.     </select>
  87. <select id="selectedYear">
  88. 	<option value="2001">2001</option>
  89.     <option value="2002">2002</option>
  90.     <option value="2003">2003</option>
  91.     <option value="2004">2004</option>
  92.     <option value="2005">2005</option>
  93.     <option value="2006">2006</option>
  94.     <option value="2007">2007</option>
  95.     <option value="2008">2008</option>
  96.     <option value="2009">2009</option>
  97.     <option value="2010">2010</option>
  98.     </select>
  99.     <input id="selectedPicker" class="hasDatepick" type="hidden" size="10 value="01/01/2001">
  100.     <img class="trigger datepick-trigger" alt="Popup" src="images/icon_cal.png">
  101.  
  102. </body>
  103. </html>
  104.  

we are now on this code are we doing anything wrong we can't seem to make it work thanks for your replies
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
ekseks is offline Offline
61 posts
since May 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Update text as numbers are typed into input field
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: onmouseover in a gridview


Tags
datetimepicker, jquery



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC