发表新帖
发表新帖

Jquery UI Datepicker not displaying

前端 未结
关注
21 1119
半阙折子戏
半阙折子戏 2020-12-05 18:10

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

相关标签:
21条回答
  • [愿得一人]
    2020-12-05 18:16

    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.

    0 讨论(0)
  • 北海茫月
    2020-12-05 18:18

    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.

    0 讨论(0)
  • 名媛妹妹
    2020-12-05 18:21 
    * 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.

    0 讨论(0)
  • 轻奢々
    2020-12-05 18:21

    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.

    0 讨论(0)
  • 余生分开走
    2020-12-05 18:24

    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.

    0 讨论(0)
  • 再見小時候
    2020-12-05 18:24

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题