[jquery] Jquery UI Datepicker not displaying

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

If you are using the scripts of metro UI css (excellent free metro UI set from http://metroui.org.ua/) , that can clash too. In my case, this was the problem recently.

So, removed the scripts reference of metro UI (as I was not using its components), datepicker is showing.

But you cant get metro look for datepicker of jQuery-ui

But in most cases, as others mentioned, its clash with duplicate versions of jQuery-UI javascripts.

Had the same problem that the datepicker-DIV has been created but didnt get filled and show up on click. My fault was to give the input the class "hasDatepicker" staticly. jQuery-ui hat to set this class by its own. then it works for me.

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.

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.

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.

Just posting because the root cause for my case has not been described her.

In my case the problem was that "assets/js/fuelux/treeview/fuelux.min.js" was adding a constructor .datepicker(), so that was overriding the assets/js/datetime/bootstrap-datepicker.js

just moving the

to be just before the $('.date-picker') solved my problem.

I have been similar problems. It would launch once and not a 2nd time under different tabs. I used a class instead of an id, and used the same class name everywhere. To me it appears datepicker activates once and the original initialization has to be used everywhere. One can probably code around this with the destroy api, but for me it was easy to simply use the same class everywhere.

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.

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.

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

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!

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

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

This just works for IE, so I apply this hack and works fine on FF, Safari and others.

Here is the full code, it's working from my side: just test.

<!doctype html>
<html lang="en">
   <head>
      <title>jQuery Datepicker</title>
      <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() {
            $( "#datepicker1" ).datepicker();
         });
      </script>
   </head>
   <body>
      <p>Enter Date: <input type="text" id="datepicker1"></p>
   </body>
</html>

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.

Please make sure that you are using the same version of jquery-ui 'js' and 'css' files. Sometimes that could be a problem.

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.

I have found a trick solution. You can use the below codes.

$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    }
});

Had the same problem while working with bootstrap modal. I had accidentally set the z-index for .ui-datepicker using !important which overrides the date picker z-index css attribute on the element. Removing !important worked.

I had the same problem using JQuery-UI 1.8.21, and JQuery-UI 1.8.22.

Problem was because I had two DatePicker script, one embedded with jquery-ui-1.8.22.custom.min.js and another one in jquery.ui.datepicker.js (an old version before I upgrade to 1.8.21).

Deleting the duplicate jquery.ui.datepicker.js, resolve problem for both 1.8.21 and 1.8.22.