Jquery UI Datepicker ne pas afficher

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?

J’avais le même problème et j’ai constaté que, dans mon cas, la cause était la div datepicker qui, pour une raison quelconque, conservait la classe .ui-helper-hidden-accessible, qui présente le code 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 de jquery sur Google CDN. Je ne pouvais donc pas modifier le code ni le CSS. J’avais également essayé de changer l’index z sans aucun succès. La solution qui a fonctionné pour moi a été de redéfinir la propriété du clip pour datepicker sur sa valeur par défaut, auto:

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

Etant donné que cela cible spécifiquement le div datepicker, il y a moins de risque d’effets secondaires indésirables sur d’autres widgets que de changer la classe ui-helper-hidden-accessible dans son ensemble.

Cela peut être utile à quelqu’un. Si vous avez copié et collé vos données de formulaire (contenant la zone de saisie datepicker, veillez à ne pas copier par inadvertance le class = “hasDatepicker”

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

NE PAS

J’ai commis cette erreur par inadvertance. Supprimer la classe et autoriser l’appel de l’interface utilisateur jQuery est apparu pour résoudre le problème.

J’espère que ça aide quelqu’un!

J’ai eu le même problème: le sélecteur 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” du diviseur de sélecteur de date (ID de: “ui-datepicker-div”), le sélecteur de date devient visible et fonctionne normalement.

Si vous ajoutez ce qui suit à la toute fin de votre fonction $ (document) .ready (), cela s’appliquera à tous les sélecteurs de dates de votre page et les fera fonctionner tous:

 $(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. Après, j’ai essayé la solution suggérée ci-dessus par Brian Mortenson et elle a parfaitement fonctionné. Elle semblait moins invasive que de supprimer 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 afin qu’elle s’applique à chaque sélecteur de dates 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'); }); 

Espérons que cela aide à obtenir quelqu’un décollé.

EDIT: Correction d’une erreur de syntaxe de code.

Assurez-vous que vous utilisez la même version des fichiers js et css de jquery-ui. 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. La fenêtre contextuelle ne s’est pas présentée et aucune des suggestions ci-dessus n’a aidé. Ce qui a aidé dans mon cas a été de supprimer class = “hasDatepicker” qui (comme le dit la réponse acceptée ici: jPuery UI datepicker ne s’affichera pas – code complet inclus ) est utilisé par jquery-ui pour indiquer qu’un datepicker a déjà été ajouté à le champ de texte. Si seulement j’avais trouvé cette réponse plus tôt.

J’ai eu le même problème avec JQuery-UI 1.8.21 et JQuery-UI 1.8.22.

Le problème était dû au fait que j’avais deux scripts DatePicker, l’un intégré à jquery-ui-1.8.22.custom.min.js et l’autre à jquery.ui.datepicker.js (une ancienne version avant la mise à niveau vers la version 1.8.21).

Suppression du fichier jquery.ui.datepicker.js en double , résolution du problème pour les versions 1.8.21 et 1.8.22.

J’ai changé la ligne

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

à

.ui-helper-hidden-accessible {position: absolue! importante; }

et tout fonctionne maintenant. Sinon, essayez d’augmenter l’index z comme suggéré par Soldierflup.

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

Avait le même problème que le datepicker-DIV a été créé, mais n’a pas été rempli et se présente au clic. Ma faute était de donner à l’entrée la classe “hasDatepicker” de manière statique. jQuery-ui chapeau pour définir cette classe par elle-même. alors cela fonctionne pour moi.

Si vous rencontrez ce problème lorsque vous utilisez le panneau de configuration de 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 plus près, l’élément est en cours de rendu, mais .ui-helper-hidden-accessible empêche son affichage.

Version actuelle du WP: 3.1.3

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

Je l’ai corrigé par: Rechargez le thème (allez à jquery ui css, ligne 43 et copiez l’URL ici pour éditer votre thème themeroller)> Réenregistrez sans les options avancées> Remplacer les anciens fichiers> Essayez de ne pas changer les URL et voyez si cela vous aide ainsi que.

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

Cela fonctionne pour IE, donc j’applique ce hack et fonctionne très bien sur FF, Safari et autres.

Ok, j’ai enfin trouvé ma solution.

Si vous utilisez des modèles sur votre vue (à l’aide de Moustache.js, ou d’autres …), vous devez prendre en compte le fait que certaines de vos classes peuvent être chargées deux fois ou seront créées ultérieurement. Donc, vous devez appliquer cette fonction $(".datepicker" ).datepicker(); une fois l’instance créée.

Cela semble arriver 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-md" }); $('#ui-datepicker-div').css('clip', 'auto'); }); 

Si vous utilisez les scripts de metro UI css (excellente interface de métro gratuite à partir de http://metroui.org.ua/ ), cela peut également entrer en conflit. Dans mon cas, c’était le problème récemment.

Donc, la référence de scripts de l’interface utilisateur de métro (comme je n’utilisais pas ses composants), datepicker est affichée.

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

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

J’ai eu des problèmes similaires. Il serait lancé une fois et pas une deuxième fois sous différents tabs. J’ai utilisé une classe au lieu d’un identifiant et le même nom de classe partout. Il me semble que datepicker s’active une fois et que l’initialisation d’origine doit être utilisée partout. On peut probablement coder autour de cela avec l’API de destruction, mais pour moi, il était facile d’utiliser simplement la même classe partout.

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

Voici le code complet, il fonctionne de mon côté: testez simplement.

           
Enter Date: