JQuery UI Datepicker ne s'affiche pas

j'avais le même problème, et j'ai trouvé que dans mon cas la cause était le div de datepicker pour une raison quelconque est de conserver la classe .ui-helper-hidden-accessible, qui a la CSS suivante:

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

j'utilise les versions hébergées par Google CDN de jquery, donc je n'ai pas pu modifier le code ou le CSS. J'avais aussi essayé de changer le z-index, sans succès. La solution qui a fonctionné pour moi était de remettre la propriété clip pour le lecteur de données à son valeur par défaut, auto:

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

étant donné que cela cible spécifiquement la div du curseur de données, il y a moins de chance d'effets secondaires involontaires sur d'autres widgets que de changer la classe ui-helper-hidden-accessible dans son ensemble.

j'ai eu le même problème: le Picker de Date a été ajouté avec succès (et pourrait même être trouvé dans FireBug), mais n'était pas visible. Si vous utilisez FireBug pour supprimer la classe "ui-helper-hidden-accessible" de la date Picker div (ID de: "ui-datepicker-div"), la Date Picker devient visible et fonctionnera comme d'habitude.

Si vous ajoutez ce qui suit à la fin de votre $(document).ready () fonction, il va appliquer cela à chaque Date Picker sur votre page, et les rendre tous lieu de travail:

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

c'était ma solution initiale. Par la suite, J'ai essayé la solution suggérée ci-dessus par Brian Mortenson et les deux fonctionnaient parfaitement, et semblaient moins invasives que d'enlever une classe entière de l'élément. J'ai donc modifié mon code pour appliquer sa solution à la méthode que j'ai utilisée (appliquer à la fin de la configuration du document de sorte qu'il s'applique à chaque Date Picker et ne nécessite pas de répéter):

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

Espérons que cela aide d'avoir quelqu'un l'en détacher.

EDIT: correction d'une erreur de syntaxe de code.

cela peut être utile à quelqu'un. Si vous avez copié et collé vos données de formulaire (qui a la boîte d'entrée de datepicker, assurez-vous que vous ne copier par inadvertance le classe= "hasDatepicker"

cela signifie que votre boîte de saisie doit ressembler à ceci:

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

NOT

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

j'ai fait cette erreur par inadvertance. Supprimer la classe et permettre l'appel UI jQuery est apparu remédier.

Espère que ça aide quelqu'un!

s'il vous plaît assurez-vous que vous utilisez la même version de jQuery-ui 'js' et 'css' fichiers. Parfois, cela pourrait être un problème.

j'ai eu un problème similaire avec les versions 1.7.2 de jQuery et jQuery UI. Le popup ne s'est pas présenté et aucune des suggestions applicables ci-dessus n'a aidé. Ce qui m'a aidé dans mon cas, c'est d'enlever la classe="hasDatepicker" qui (comme le note la réponse acceptée ici: jQuery UI datepicker n'affichera pas - le code complet inclus ) est utilisé par jquery-ui pour indiquer qu'un datepicker a déjà été ajouté au champ de texte. J'aurais aimé trouver cette réponse plus tôt.

j'ai eu le même problème en utilisant JQuery-UI 1.8.21, et JQuery-UI 1.8.22.

problème était parce que j'ai eu deux script DatePicker, un intégré avec jquery-ui-1.8.22.personnaliser.min.js et un autre dans jquery.interface.datepicker.js (une ancienne version avant que je passe à 1.8.21).

supprimer le dupliquer jquery.interface.datepicker.js , résoudre le problème pour les deux 1.8.21 et 1.8.22.

j'ai changé la ligne

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

à

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

et tout fonctionne maintenant. Sinon, essayez d'augmenter l'indice z comme Soldierflup l'a suggéré.

essayez de placer le z-index de votre CSS de curseur de données beaucoup plus haut (par exemple z-index: 1000). Le curseur de données est probablement affiché sous votre contenu original. J'ai eu le même problème et cela m'a beaucoup aidé.

a eu le même problème que le datepicker-DIV a été créé mais n'a pas été rempli et apparaître sur le clic. Ma faute était de donner l'entrée de la classe "hasDatepicker" de façon statique. jQuery-ui chapeau pour définir cette classe de son propre. puis il travaille pour moi.

dans le cas où vous avez ce problème en travaillant avec WordPress Control panel et en utilisant un thème ThemeRoller généré - soyez sûr que vous utilisez la Version 1.7.3 du thème, 1.8.13 ne fonctionnera pas. (Si vous regardez attentivement, l'élément est rendu, mais .ui-helper-hidden-accessible empêche l'affichage.

version actuelle du WP: 3.1.3

c'est un problème légèrement différent. Avec moi, le capteur de date s'affichait mais la css ne chargeait pas.

Je l'ai corrigé par: recharger le thème (allez à jQuery ui css, ligne 43 et copiez l'url là pour éditer votre thème themeroller) > Résaver sans les options avancées > remplacer les vieux fichiers > essayer de ne pas changer les urls et voir si cela aide aussi.

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

cela fonctionne juste pour IE, donc j'applique ce hack et fonctionne très bien sur FF, Safari et d'autres.

Ok, j'ai enfin trouvé ma solution.

si vous utilisez des gabarits sur votre vue (en utilisant Moustache.js, ou autres...), vous devez tenir compte du fait que certaines de vos classes peuvent être chargées deux fois, ou seront créées plus tard. Donc, vous devez appliquer cette fonction $(".datepicker" ).datepicker(); une fois que l'instance a été créée.

Semble se produire avec certains thèmes (cupertino/thème.css) dans mon cas.

Et le problème est la .ui-helper-hidden-accessible class qui ont la propriété clip, comme les utilisateurs précédents l'ont dit.

juste L'écraser et il sera très bien

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

si vous utilisez les scripts de Metro UI CSS (excellent Metro UI set from http://metroui.org.ua / ), qui peut aussi se heurter. Dans mon cas, c'était le problème récemment.

donc, supprimé la référence de scripts de Metro UI (comme je n'utilisais pas ses composants), datepicker montre.

mais vous ne pouvez pas obtenir metro chercher datepicker de jQuery-ui

mais dans la plupart des cas, comme d'autres l'ont mentionné, conflit avec les versions dupliquées de jQuery-UI javascripts.

j'ai été des problèmes similaires. Il serait lancé une fois et pas une deuxième fois sous des onglets différents. J'ai utilisé une classe au lieu d'un id, et a utilisé le même nom de classe partout. Pour moi, il apparaît que datepicker s'active une fois et l'initialisation originale doit être utilisée partout. On peut probablement coder autour de cela avec l'api destroy, mais pour moi il était facile d'utiliser simplement la même classe partout.

j'ai trouvé une solution. Vous pouvez utiliser les codes ci-dessous.

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

voici le code complet, il fonctionne de mon côté: juste tester.

<!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>