<!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.

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

pls me and my team need this badly can someone help?

can someone please help us we need this for a project within 36 hours before submittion thanks :(

<!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" />

<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/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>

<style type="text/css">@import "jquery.datepick.css";</style>

<script type="text/javascript">

//Update three select controls to match a datepicker selection
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'});

//Update datepicker from three select controls
$('#selectedMonth, #selectedDay, #selectedYear').change(function() {
$('#selectedPicker').datepick('setDate', new Date ($('#selectedYear').val(), $('#selectedMonth').val() - 1, $('#selectedDay').val()));});

</script>

<title>LOL</title>
</head>

<body>

<select id="selectedMonth">
	<option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dev</option>
    </select>
<select 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="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">
	<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 id="selectedPicker" class="hasDatepick" type="hidden" size="10 value="01/01/2001">
    <img class="trigger datepick-trigger" alt="Popup" src="images/icon_cal.png">

</body>
</html>

we are now on this code are we doing anything wrong we can't seem to make it work thanks for your replies

not working

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.