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 the jquery and ui library versions.
UPDATE END

I having an issue with the JQuery UI datepicker. The datepicker is being attached to a class and that part is working but the datepicker is not being displayed.

Here is the datepicker code I am using and the inline style that is being generated when I click in the input box that has the class ".datepicker".

$('.datepicker').datepicker({dateFormat:'dd/mm/yy'});

display:none;
left:418px;
position:absolute;
top:296px;
z-index:1;

If I change the display:none to display:block the datepicker works fine except it dosen't close when I select a date.

Jquery libraries in use:

• jQuery JavaScript Library v1.4.2
• jQuery UI 1.8 jQuery UI Widget 1.8
• jQuery UI Mouse 1.8 jQuery UI
• Position 1.8 jQuery UI Draggable 1.8
• jQuery UI Droppable 1.8 jQuery UI
• Datepicker 1.8

Solution 1

it's the css file in the new one doesn't work. Try to include the old 1.7.* css file on your header too, and try again.

Also, did you try to do a .datepicker( "show" ) right after it constructed?

Solution 2

I was having the same problem, and I found that in my case the cause was the datepicker div for some reason is retaining the class .ui-helper-hidden-accessible, which has the following CSS:

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

I'm using the google CDN hosted versions of jquery, so I couldn't modify the code or the CSS. I had also tried changing the z-index without any success. The solution that worked for me was to set the clip property for the datepicker back to its default value, auto:

$('.date').datepicker();
$('#ui-datepicker-div').css('clip', 'auto');

Since this specifically targets the datepicker div, there's less of a chance of unintended side effects on other widgets than changing the ui-helper-hidden-accessible class as a whole.

Solution 3

This may be helpful to someone. If you copied and pasted your form data (which has the datepicker input box, ensure you do not inadvertently copy the class="hasDatepicker"

This means your input box should look like this:

<input id="dateChooser" name="dateChooser" type="text" value=""/>

NOT

<input id="dateChooser" name="dateChooser" type="text" value="" class="hasDatepicker">

I made that mistake inadvertently. Removing the class and allowing the jQuery UI call appeared to fix it.

Hope that helps someone!

Solution 4

I had the same issue: the Date Picker was added successfully (and could even be found in FireBug), but was not visible. If you use FireBug to remove the class "ui-helper-hidden-accessible" from the Date Picker div (ID of: "ui-datepicker-div"), the Date Picker becomes visible and will work like normal.

If you add the following at the very end of your $(document).ready() function, it will apply this to every Date Picker on you page, and make them all work:

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible');  
});

That was my initial fix. Afterwards, I tried the solution suggested above by Brian Mortenson and it both worked perfectly, and seemed less invasive than removing an entire class from the element. So I modified my code to apply his solution to the method I used (apply at the end of the document setup so that it applies to every Date Picker and does not require repeating):

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').css('clip', 'auto');  
});

Hope this helps to get someone unstuck.

EDIT: Fixed a code syntax error.

Solution 5

I've had a similar issue with 1.7.2 versions of jQuery and jQuery UI. The popup wasn't showing up and none of the applicable suggestions above helped. What helped in my case was taking out the class="hasDatepicker" which (as the accepted answer here notes: jQuery UI datepicker will not display - full code included) is used by jquery-ui to indicate that a datepicker has already been added to the text field. Wish I found that answer sooner.

View more solutions

Comments

[Jeriko]

seems display:none and display:block are overriding the show()/hide() methods that datepicker calls.. are you sure there isn't a CSS rule somewhere else that's conflicting?

[scott]

The display:none is being generated by the datepicker plugin and there is not css attached it from my stylesheet.

[Adamantus]

I tried this but it didn't work for me. I'm using Jquery UI 1.8.18 and Jquery 1.7.1 so this is very up to date.

[undefined]

can you give some example code? There are all kinds of reasons why it might not have worked. My first guess would be that these lines are not being called, or that the selectors are not selecting what you would expect them to select.

[Mike S.]

Still didn't work for me. I tried this suggestion, I've tried @brian suggestion, I've checked for matching source versions and setting the z-index. None of these worked. My datepicker displays without any display styling as if it were all transparent except the text.

[Bird87 ZA]

Had the same issue just now, decided to update my css file to the newest version, and it worked. I had 1.8.16 and now have 1.8.21. Just an addition to this answer.

[undefined]

@MikeS. sounds like the CSS file that contains the datepicker is not being applied, or other rules are being applied after. Can you inspect your date picker in your browser's (Chrome's, preferably) dev tools and see the what rules are being applied and from where? If they're not there, double check that the path to the file is correct.

[Nathan]

Worked perfectly for me. Thanks.

[Milo LaMar]

I removed the class altogether. $('#ui-datepicker-div').removeClass('ui-helper-hidden-access‌​ible'); for the same effect.

[Admin]

Thank you so much! Your solution is the only one that has worked for me. You are awesome. Keep up the good work.

[Gorgsenegger]

Thank you! This worked for me using jQuery-1.9.1 and jQuery UI 1.10.2.

[Tomas Kubes]

Exactly like this.

[Bruce]

I search for so long to find this answer! Bravo.... I thought I was losing my mind.

[John Rand]

Me too. Thanks!

[Tycon]

This explaination helped me to realize if you are duplicating form elements which already have the hasDatepicker class the duplicated datepickers will not work. I had to remove the class from the cloned forms - something like $("#sibling_"+nextSibling).find('input').removeClass("hasDat‌​epicker");