Question

I produce a table with multiple rows, each containing a person’s name and a Twitter Bootstrap Datepicker for each, to allow the user to capture each person’s birthday.

The datepicker works perfectly for the first table row (the first person displayed), but is unresponsive for all other rows.

This is the Javascript:

<script>
$(function(){ $('#datepicker').datepicker()});
</script>

This is the table row:

<td> 
<div class='input-append date' id='datepicker' data-date='12-02-2012' data-date-format='mm-dd-yyyy'>
<input class='span5' size='16' type='text' placeholder='12-02-2012' readonly>
<span class='add-on'><i class='icon-calendar'></i></span>
</div>
</td>

Help appreciated.

Answer 1

The ID is a unique value in the DOM which identifies the element. Because you have multiple elements, you should use a CSS class instead of Id and then change #datepicker to .datepicker.

The # means it’s an ID, whereas the . means it’s a CSS class.

Also, FYI the datepicker is a jQuery component and not a Bootstapper component.