web-dev-qa-db-fra.com

Jquery UI Datepicker ne s'affiche pas

[~ # ~] mise à jour [~ # ~]
Je suis revenu à Jquery 1.3.2 et tout fonctionne, je ne sais pas quel est/était le problème car je n'ai rien changé d'autre que les versions de bibliothèque jquery et ui.
MISE À JOUR FIN

J'ai un problème avec le JQuery UI datepicker . Le sélecteur de date est attaché à une classe et cette partie fonctionne mais le sélecteur de date n'est pas affiché.

Voici le code de datepicker que j'utilise et le style en ligne qui est généré lorsque je clique dans la zone de saisie qui a la classe ".datepicker".

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

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

Si je change l'affichage: aucun pour afficher: bloquer le sélecteur de date fonctionne bien sauf qu'il ne se ferme pas lorsque je sélectionne une date.

Bibliothèques Jquery en cours d'utilisation:

  • bibliothèque jQuery JavaScript 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
jqueryjquery-uidatepickeruidatepickerjquery-ui-datepicker
27
scott

c'est le fichier css dans le nouveau qui ne fonctionne pas. Essayez également d'inclure l'ancien fichier 1.7. * Css dans votre en-tête, puis réessayez.

Aussi, avez-vous essayé de faire un .datepicker ("show") juste après sa construction?

11
user227353

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

.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 également essayé de changer le z-index sans succès. La solution qui a fonctionné pour moi a été de rétablir la valeur par défaut de la propriété de clip pour le sélecteur de date, auto:

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

Comme cela cible spécifiquement la div datepicker, 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.

33
undefined

Cela peut être utile à quelqu'un. Si vous avez copié et collé vos données de formulaire (qui contient la zone de saisie Datepicker, assurez-vous que ne pas copiez par inadvertance le class = "hasDatepicker"

Cela signifie que votre zone de saisie doit ressembler à ceci:

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

NE PAS

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

J'ai fait cette erreur par inadvertance. La suppression de la classe et l'autorisation de l'appel jQuery UI ont semblé le corriger.

J'espère que cela aide quelqu'un!

16
Bren1818

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

Si vous ajoutez ce qui suit à la toute fin de votre fonction $ (document) .ready (), il l'appliquera à chaque sélecteur de date sur votre page et les fera fonctionner:

$(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 elle fonctionnait parfaitement, et semblait moins invasive que la suppression d'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 pour qu'il s'applique à chaque sélecteur de date et ne nécessite pas de répétition):

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

J'espère que cela aide à décoller quelqu'un.

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

10
olen_garn

Veuillez vous assurer que vous utilisez même version des fichiers jquery-ui 'js' et 'css'. Parfois, cela pourrait être un problème.

4
Anticipator

J'ai eu un problème similaire avec les versions 1.7.2 de jQuery et jQuery UI. La fenêtre contextuelle ne s'affichait pas et aucune des suggestions applicables ci-dessus n'a aidé. Ce qui a aidé dans mon cas a été de retirer la classe = "hasDatepicker" qui (comme la réponse acceptée ici le note: jQuery UI datepicker ne s'affichera pas - code complet inclus ) est utilisé par jquery-ui pour indiquer que un sélecteur de date a déjà été ajouté au champ de texte. J'aimerais avoir trouvé cette réponse plus tôt.

4
Spaceploit

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

Le problème était parce que j'avais deux scripts DatePicker, l'un intégré avec jquery-ui-1.8.22.custom.min.js et un autre dans jquery.ui.datepicker.js (une ancienne version avant de passer à la version 1.8.21).

La suppression de en double jquery.ui.datepicker.js , résout le problème à la fois pour 1.8.21 et 1.8.22.

3
Jeremie

J'ai changé de ligne

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

à

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

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

2
Kyle Robson

A eu le même problème que le datepicker-DIV a été créé mais n'a pas été rempli et n'apparaît pas au clic. Ma faute était de donner à l'entrée la classe "hasDatepicker" de manière statique. Chapeau jQuery-ui pour définir cette classe par ses propres moyens. alors ça marche pour moi.

1
SchließMuskelKater

Essayez de mettre le z-index de votre datepicker css beaucoup plus haut (par exemple z-index: 1000). Le sélecteur de date est probablement affiché sous votre contenu d'origine. J'ai eu le même problème et cela m'a aidé.

1
Soldierflup

Ok, j'ai enfin trouvé ma solution.

Si vous utilisez des modèles sur votre vue (en utilisant Moustache.js, ou autres ...), vous devez prendre en compte que certaines de vos classes peuvent être chargées deux fois, ou seront créées plus tard. Vous devez donc appliquer cette fonction $(".datepicker" ).datepicker(); une fois l'instance créée.

0
Mc-

Si vous utilisez les scripts de metro UI css (excellent ensemble gratuit de metro UI de http://metroui.org.ua/ ), cela peut aussi se heurter. Dans mon cas, c'était le problème récemment.

Ainsi, la référence aux scripts de metro UI a été supprimée (car je n'utilisais pas ses composants), datepicker est affiché.

Mais vous ne pouvez pas obtenir le look de métro pour le datepicker de jQuery-ui

Mais dans la plupart des cas, comme d'autres l'ont mentionné, son conflit avec les versions en double des javascripts jQuery-UI.

0
Tejasvi Hegde

Je poste juste parce que la cause première de mon cas ne lui a pas été décrite.

Dans mon cas, le problème était que "assets/js/fuelux/treeview/fuelux.min.js" ajoutait un constructeur .datepicker (), ce qui remplaçait les assets/js/datetime/bootstrap-datepicker.js

déplacer simplement le

être juste avant que $ ('. date-picker') ne résout mon problème.

0
D.Firka

Si vous rencontrez ce problème lorsque vous travaillez avec WordPress et utilisez un thème généré par ThemeRoller - assurez-vous que vous utilisez la version 1.7.3 du thème, 1.8.13 ne fonctionnera pas. ( Si vous regardez de près, l'élément est en cours de rendu, mais .ui-helper-hidden-accessible empêche son affichage.

Version actuelle WP Version: 3.1.3

0
Andy
* 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 autres.

0
Ricardo Cruz

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

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

Il suffit de l'écraser et tout ira bien

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

Voici le code complet, ça marche de mon côté: il suffit de 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>
0
Hrushi

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

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

J'ai eu des problèmes similaires. Il se lancerait une fois et non une deuxième fois sous différents onglets. J'ai utilisé une classe au lieu d'un identifiant et j'ai utilisé le même nom de classe partout. Pour moi, il semble que datepicker s'active une fois et que l'initialisation d'origine doit être utilisée partout. On peut probablement coder cela avec l'api destroy, mais pour moi, il était facile d'utiliser simplement la même classe partout.

0
Jeff B.

C'est un problème légèrement différent. Avec moi, le sélecteur de date s'afficherait mais le CSS ne se chargeait pas.

J'ai résolu le problème en: rechargeant le thème (allez dans jquery ui css, ligne 43 et copiez-y l'URL pour modifier votre thème de thème)> Réenregistrer sans les options avancées> Remplacer les anciens fichiers> Essayez de ne pas modifier les URL et voyez si cela aide ainsi que.

0
Adamantus