<table align=center>
<tr> <th>Check/UnCheck</th>
<th>MYear</th>
<th>Date1</th>
<th>Date2</th>
<!-- <th>Bank Value Date</th> -->
</tr>
<%for(int i=0 ; i<mYearVector.size();i++)
{
%>
<tr>
<td align="top">
<INPUT class="chkValues" id="ckbCheckAll" name="chkBox" type="checkbox" value="<%=(String)newValues.elementAt(0)+","%><%=(String)newValues.elementAt(1)+","%><%=(String)newValues.elementAt(2)%>" size="50">
</td>
<td align="left">
<input class=inputText type="text" name="mYear" id="mYear" value="<%=mYearVector.elementAt(i)%>" readonly>
</td>
<td>
<input type=text class=inputText readonly name=payrollCutOffDate id=payrollCutOffDate value="<%=(oldValues.elementAt(0)==null?"":oldValues.elementAt(0))%>">
<input type=button value="<%=messages.getLocalizedString("Date1")%>" class=buttonstyle
onmouseover="onMouseOver(this)"
onmouseout="onMouseOut(this)"
onclick="javascript:show_calendar('Date1');"/>
</td>
<td>
<input type=text class=inputText readonly name=payrollPaymentDate id=payrollPaymentDate value="<%=(oldValues.elementAt(1)==null?"":oldValues.elementAt(1))%>">
<input type=button value="<%=messages.getLocalizedString("Date2")%>" class=buttonstyle
onmouseover="onMouseOver(this)"
onmouseout="onMouseOut(this)"
onclick="javascript:show_calendar('Date2');"/>
</td>
</tr>
<%}%>
</table>
<div id="foo">Content one</div>
<div id="foo">Content two</div>
If you run the code through a validator like https://validator.w3.org/ you will see an error. You can only have one unique id. This is a common error that can break your js code.
<div id="foo">Content one</div>
<div id="foo">Content two</div>
<input class="date1" id="dob" name="dob" type="text" value="" />
<input class="date2" id="dob" name="dob" type="text" value="" />
<input class="date3" id="dob" name="dob" type="text" value="" />
What you should have instead is <input class="date" id="dob1" name="dob" type="text" value="" />
<input class="date" id="dob2" name="dob" type="text" value="" />
<input class="date" id="dob3" name="dob" type="text" value="" />
<table id="phone" width="100%" name="phone">
<tr>
<td colspan="5" bgcolor="#5C85B3">Phone</td>
</tr>
<tr>
<th>Date1</td>
<th>Date2</th>
<th>Date3</th>
</tr>
<tr>
<td>
<input class="date" id="dob1" name="dob" type="text" value="" />
</td>
<td>
<input class="date" id="dob2" name="dob" type="text" value="" />
</td>
<td>
<input class="date" id="dob3" name="dob" type="text" value="" />
</td>
</tr>
</tr>
<tr>
<td>
<input class="date" id="dob4" name="dob" type="text" value="" />
</td>
<td>
<input class="date" id="dob5" name="dob" type="text" value="" />
</td>
<td>
<input class="date" id="dob6" name="dob" type="text" value="" />
</td>
</tr>
</tr>
<tr>
<td>
<input class="date" id="dob7" name="dob" type="text" value="" />
</td>
<td>
<input class="date" id="dob8" name="dob" type="text" value="" />
</td>
<td>
<input class="date" id="dob9" name="dob" type="text" value="" />
</td>
</tr>
</table>
$(document).ready(function(){
$(".date").datepicker();
});
Sometimes these things do not work because you are trying to listen for an id instead of a class name. If you are listening for a class name, there is probably a js error. You can also run the code on your server yourself, hit the f12 key to get to dev tools and check the console for errors.