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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt input id  dateChooser  name  dateChooser  type  text  value     gt    NOT   lt input id  dateChooser  name  dateChooser  type  text  value    class  hasDatepicker  gt    I made that mistake inadvertently  Removing the class and allowing the jQuery UI call appeared to fix it   Hope that helps someone

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Here is the full code  it s working from my side  just test    lt  doctype html gt   lt html lang  en  gt      lt head gt         lt title gt jQuery Datepicker lt  title gt         lt link href  http   code jquery com ui 1 10 4 themes ui-lightness jquery-ui css  rel  stylesheet  gt         lt script src  http   code jquery com jquery-1 10 2 js  gt  lt  script gt         lt script src  http   code jquery com ui 1 10 4 jquery-ui js  gt  lt  script gt         lt script gt             function                      datepicker1    datepicker                        lt  script gt      lt  head gt      lt body gt         lt p gt Enter Date   lt input type  text  id  datepicker1  gt  lt  p gt      lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[jquery] Jquery UI Datepicker not displaying

Examples related to jquery

Examples related to jquery-ui

Examples related to datepicker

Examples related to uidatepicker

Examples related to jquery-ui-datepicker