Jquery UI Datepicker not displaying

Question

UPDATE
I have reverted back to Jquery 1.3.2 and everything is working, not sure what the problem is/was as I have not changed anything else apart of t

Answer 1

Ok, I finally found my solution.

If you are using templates on your view (using Moustache.js, or others...), you must take into account that some of your classes can be loaded twice, or will be created later. So, you must apply this function $(".datepicker" ).datepicker(); once the instance has been created.

Answer 2

Try putting the z-index of your datepicker css a lot higher (eg z-index: 1000). The datepicker is probably shown under your original content. I had the same problem and this helped me out.

Answer 3

I changed the line

.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }

to

.ui-helper-hidden-accessible { position: absolute !important; }

and everything works now. Otherwise try upping the z-index as Soldierflup suggested.

Answer 4

In case you are having this issue when working with WordPress control panel and using a ThemeRoller generated theme - be sure that you are using 1.7.3 Version of theme, 1.8.13 will not work. (If you look closely, the element is being rendered, but .ui-helper-hidden-accessible is causing it to not be displayed.

Current WP Version: 3.1.3

Answer 5

This is a slightly different problem. With me the date picker would display but the css was not loading.

I fixed it by: Reload the theme (go to jquery ui css, line 43 and copy the url there to edit your themeroller theme) > Resave without the advanced options > Replace old files > Try not to change the urls and see if that helps as well.

Answer 6

Seems to happen with some themes (cupertino/theme.css) in my case.

And the problem is the .ui-helper-hidden-accessible class which have clip property, like previous users said.

Just Overwrite it and it will be fine

$(document).ready(function() {
    $("#datePicker").datepicker({ dateFormat: "yy-m-d" });
    $('#ui-datepicker-div').css('clip', 'auto');
});