jQuery datepicker not displaying

Question

Im trying to use a jQuery datepicker to select a date, but when I click in the text box, the datepicker does not display.

HTML:

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

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

<body>
    <p>Date: <input type="text" id="date"></p>
</body>

Also, when I inspect the element, it shows up as having a class of hasDatepicker

Your code seems fine (http://jsfiddle.net/j08691/syvff3ek/). Any errors in the console? — j08691, Mar 10 '15 at 16:54
No errors at all. I am using this form in a google map infowindow which uses clone() to display the map. Would this maybe be causing a problem with it? — Stephen, Mar 10 '15 at 16:56
I'd stay away from ids here. Use a class. See this answer http://stackoverflow.com/questions/707603/apply-jquery-datepicker-to-multiple-instances If clone is giving you issues, see this answer http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui — Radio, Mar 10 '15 at 17:27

score 1 · Answer 1 · answered Dec 10 '16 at 05:58

If your code is indeed executing after the DOM has fully loaded and that is NOT the problem...

Try to remove the .hasDatepicker before executing.

If it's chainable

$("#date").removeClass("hasDatepicker").datepicker();

Otherwise

$("#date").removeClass("hasDatepicker");
$("#date").datepicker();

score 0 · Answer 2 · answered Mar 10 '15 at 18:57

0

Your script is likely running before the DOM has fully loaded.

You want to make sure your jQuery executes when the page is ready:

$(document).ready(function() {
  // Run your code here
});

answered Mar 10 '15 at 18:57

Ryan Tuosto

1,941
15
23

jQuery datepicker not displaying

2 Answers2