Javascript DatePicker Not functioning

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>

Your ids are startDate and endDate, not start_date and end_date. Fix that, and it works. jsfiddle.net/2dVC3 P.S. Put your script in a <script> tag. — gen_Eric
– gen_Eric, Commented Jun 25, 2012 at 19:45

InspiredBy · Accepted Answer · 2012-06-25 19:50:55Z

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>

edited Jun 25, 2012 at 19:50

answered Jun 25, 2012 at 19:46

InspiredBy

4,3206 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

InspiredBy Over a year ago

end_date = id and endDate= name . It's other way around in your code

gen_Eric Over a year ago

Make sure to put your script in <script> tags :-P

Andy McCall Over a year ago

There's alot of code omitted here so as far as the script tag goes just know it's there

gen_Eric · Accepted Answer · 2012-06-25 19:47:52Z

1

Wrap your jQuery UI datepicker code in a <script> tag, and mark it as javascript with the type attribute. Use a single document ready block for your two datepicker calls. Ensure you're using the correct IDs of your elements.

<script type="text/javascript">
   $(document).ready(function() {

        $("#startDate").datepicker();
        $("#endDate").datepicker();
   });
</script>

edited Jun 25, 2012 at 19:47

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

answered Jun 25, 2012 at 19:45

p.campbell

101k70 gold badges265 silver badges326 bronze badges

3 Comments

gen_Eric Over a year ago

$(function() { is shorthand for $(document).ready(function() {.

gen_Eric Over a year ago

The type attribute is optional in HTML5 :-)

p.campbell Over a year ago

Unsure these comments can strictly eliminate my answer to this problem. The biggest problem was the jQuery code wasn't even in a script block. 2nd problem is that we aren't even sure he's in an HTML5 document here. 3rd, you don't want to have 2 document ready blocks in this context. This question shows signs of cargo culting, so using/encouraging the shorthand isn't useful to the OP.

Collectives™ on Stack Overflow

Javascript DatePicker Not functioning

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related