Member Avatar for ekseks

So basically guys, the datepicker is connected to three fields (drop downs for..) [Month]/[Day]/[Year]-[Datepicker(Calendar)] now I just wanted to get the dropdowns' values and pass it on a textbox (namely: selectedDate - you can see below) having a format of [[U]mm/dd/yyy[/U]] thanks for the help experts.

Code from http://keith-wood.name/datepick.html

// 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(); // 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())); 
});

The Dropdowns:

<body>
<form id = "list">
<select id = 'selectedMonth' name = 'selectedMonth'>
</select>
<select id = 'selectedDay' name = 'selectedDay'>
</select>
<select id = 'selectedYear' name = 'selectedYear'>
</select>
<input  type="hidden" size="10" id = "selectedPicker"/>
<div style="display:none"><img src="amazingcalendar.jpg" width="16" height="15" id = "calImg"/></div>
<input  type="text" size="10" id = "selectedDate"/>
</form>
</body>
Edited by ekseks because: n/a
  • 2 Contributors
  • 1 Reply
  • 137 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by madkat3
Member Avatar for madkat3

...Pretty new myself, but I'd probably do something like this... (yes I was too lazy to finish the "year" options lol, but you can figure that out :D) I know it doesn't fit in your code, and it isn't pretty, but it works. :) Personally, I like to keep things simple. ;) Hopefully it will help at least.

<script language="javascript">
var date1="01";
var date2="01";
var date3="2010";

function selectDate(){
document.forms[0].selectedDate.value=date1 + "/" + date2 + "/" + date3;
}
</script>
<form id = "list">

<SELECT NAME="selectedMonth" onchange="javascript:date1=this.options[this.selectedIndex].value;selectDate();">
<OPTION>01</OPTION>
<OPTION>02</OPTION>
<OPTION>03</OPTION>
<OPTION>04</OPTION>
<OPTION>05</OPTION>
<OPTION>06</OPTION>
<OPTION>07</OPTION>
<OPTION>08</OPTION>
<OPTION>09</OPTION>
<OPTION>10</OPTION>
<OPTION>11</OPTION>
<OPTION>12</OPTION>
</SELECT>

<SELECT NAME="selectedDay" onchange="javascript:date2=this.options[this.selectedIndex].value;selectDate();">
<OPTION>01</OPTION>
<OPTION>02</OPTION>
<OPTION>03</OPTION>
<OPTION>04</OPTION>
<OPTION>05</OPTION>
<OPTION>06</OPTION>
<OPTION>07</OPTION>
<OPTION>08</OPTION>
<OPTION>09</OPTION>
<OPTION>10</OPTION>
<OPTION>11</OPTION>
<OPTION>12</OPTION>
<OPTION>13</OPTION>
<OPTION>14</OPTION>
<OPTION>15</OPTION>
<OPTION>16</OPTION>
<OPTION>17</OPTION>
<OPTION>18</OPTION>
<OPTION>19</OPTION>
<OPTION>20</OPTION>
<OPTION>21</OPTION>
<OPTION>22</OPTION>
<OPTION>23</OPTION>
<OPTION>24</OPTION>
<OPTION>25</OPTION>
<OPTION>26</OPTION>
<OPTION>27</OPTION>
<OPTION>28</OPTION>
<OPTION>29</OPTION>
<OPTION>30</OPTION>
<OPTION>31</OPTION>
</SELECT>

<input  type="hidden" size="10" name="selectedPicker" />
<div style="display:none"><img src="amazingcalendar.jpg" width="16" height="15" id = "calImg"/></div>
<input  type="text" size="10" name="selectedDate" id = "selectedDate"/>
</form>
Edited by madkat3 because: n/a
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.