jQuery UI datepicker will not display - full code included

Question

I am having trouble displaying the jQuery datepicker as shown here: http://jqueryui.com/demos/datepicker/

I believe I downloaded all of the proper files, but to be c

Answer 1

Remove class="hasDatepicker"

Answer 2

Please remove the class hasDatepicker from input tag and it should work fine.

class = 'hasDatepicker' //Need to remove

Answer 3

I had the similar issue. My resolution was to add z-indexin .date-picker of datePicker.css

.date-picker {
position: absolute;
z-index:1000;/*********** MY Change *************/
font-size: 1em;
color: #CCC;
text-align: center;
cursor: default;

border: 1px solid #444;
border-radius: 2px;
margin: 6px 0;
background: #222;
box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2);} 

That's it!!! And Lo the date picker started displaying. Hope this helps some one who'd come here for similar issues.

Answer 4

If you look carefully at the source code of jQuery UI lib you can see that it uses hasDatepicker class inside for datepicker. So, use any other class (even hasdatepicker works) but not hasDatepicker:

<input type="text" id="datepicker" class="anyOtherClassName"/>

or:

<input type="text" id="datepicker" class="hasdatepicker"/>