Hi,
I construct a table with dynamic rows and bind the date picker
elements to some of the columns. However, when a row is added to the
table the date picker works only for the first row and not the rest of them.
I tried to unbind and then rebind the date picker but does not work.
Any help would be great.
Regards,
Arjun
The code is attached for reference.
$('a.add-passenger').click(function(event){
event.preventDefault();
counter++;
var newRow =
'<tr>' +
'<td><input type="text"
name="Name' + counter + '"/></td>' +
'<td><input type="text"
name="DOB' + counter + '"/></td>' +
'<td><input type="text"
name="PassNum' + counter + '"/></td>' +
'<td><input type="text"
name="PassExpiry' + counter +
'"/></td>' +
'<td><input type="text"
name="Destination' + counter +
'"/></td>' +
'<td><input type="text"
name="DepDate' + counter + '"/></td>' +
'<td><input type="text"
name="ArrDate' + counter + '"/></td>' +
'<td><a class="remove">remove</a></td>'
'</tr>';
$table.append(newRow);
$( "DOB" ).datepicker( "destroy" );
$("#DOB").datepicker({
changeMonth: true,
changeYear: true
});
$("#ArrDate").datepicker({
minDate: 0,
maxDate:"+60D",
numberOfMonths: 2,
onSelect: function(selected) {
$("#DepDate").datepicker("option","maxDate", selected)
}
});
$("#DepDate").datepicker({
minDate: 0,
maxDate: "+60D",
numberOfMonths: 2,
onSelect: function(selected) {
$("#ArrDate").datepicker("option","minDate", selected)
}
});
});