Question

I cant get jquery’s date picker to work on my page. I have a forum post on codecall if anyone wants more details. Here’s a link http://forum.codecall.net/topic/70462-copy-and-paste-date-picker-javascipt/. Here’s my code that is associated with this page. When I click the text fields the datepicker doesn’t show up. Why? Can anyone see the problem?

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});

<div id="dateField"> 
<p> 
Start Date: <input type="TEXT" 
name="start_date" id="startDate" 
value="" /> 
</p> 
<p> 
End Date: <input type="TEXT" 
name="end_date" id="endDate" 
value="" /> 
</p> 
<small>Dates Should be in the format DD/MM/YYYY</small> 
</p> 
</div>  

Answer 1

Switch your Id and name tags around. An ID attribute has to be inside of the $(‘ID’).datepicker() , not name.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

<script type="text/javascript">
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
</script>

<div id="dateField"> 
<p> 
Start Date: <input type="TEXT" 
id="start_date" name="startDate" 
value="" /> 
</p> 
<p> 
End Date: <input type="TEXT" 
id="end_date" name="endDate" 
value="" /> 
</p> 
<small>Dates Should be in the format DD/MM/YYYY</small> 
</p> 
</div>