Stephen
Stephen

Reputation: 537

jQuery datepicker not displaying

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

Upvotes: 0

Views: 1158

Answers (2)

Michael Paccione
Michael Paccione

Reputation: 2817

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();

Upvotes: 1

Ryan Tuosto
Ryan Tuosto

Reputation: 1951

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
});

Upvotes: 0

Related Questions