jQuery 1.8.2 datepicker - two fields
I'm trying to implement the datepicker and I have two fields on my form: Birthdate & Lived here since?
In my header I have:
- <script type="text/javascript" src="javascript/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="javascript/jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="javascript/jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="javascript/jquery/ui/jquery.ui.datepicker.js"></script>
<link type="text/css" href="javascript/jquery/themes/ui-lightness/jquery.ui.datepicker.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
The html looks like this:
- <tr>
<td>Date of Birth MM/DD/YYYY<br>(Restrict kids from some areas)</td>
<td><input type='text' id='datepicker' name='dob' maxlength='12' /></td>
</tr>
<tr>
<td>Lived here since?</td>
<td><input type='text' id='datepicker' name='since' maxlength='12' /></td>
</tr>
When I click on the 1st date field (birthday) it mostly works... I say mostly because it doesn't appear to be pulling in that css as the widget is pretty spread out and has no borders etc.
When I click on the 2nd date field (here since?), absolutely nothing happens.
Surely this supports multiple date fields on the same form so what am I doing wrong?
Thanks,
Pete