jquery date picker link to dropdown

Question

ekseks -2 Junior Poster in Training

14 Years Ago

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

javascript jquery

2 Contributors
5 Replies
335 Views
4 Years Discussion Span
Latest Post 10 Years Ago Latest Post by neerajgarg

Reply to this topic

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.

ekseks -2 Junior Poster in Training · Answer 1 · 2010-07-21T11:29:13+00:00

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

ekseks -2 Junior Poster in Training · Answer 2 · 2010-07-21T19:09:15+00:00

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

ekseks -2 Junior Poster in Training · Answer 3 · 2010-07-21T19:44:59+00:00

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

ekseks -2 Junior Poster in Training · Answer 4 · 2010-07-22T09:32:31+00:00

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

neerajgarg 0 Newbie Poster · Answer 5 · 2014-08-29T09:37:43+00:00

neerajgarg 0 Newbie Poster

10 Years Ago

not working

Edited 10 Years Ago by neerajgarg