Le sélecteur de date jQuery ne bouge pas avec le défilement de page

Le problème est que le sélecteur de date est en dehors de la div avec overflow: scroll; . Si le datepicker était généré à l’intérieur du conteneur, cela ne poserait pas de problème.

Solution: http://jsfiddle.net/jbK6a/15/

J’ai placé le sélecteur de date derrière l’entrée avec l’événement beforeShow .

Et j’ai utilisé la position: relative; sur le conteneur à défilement de sorte que de l’élément Absolu écoute le conteneur.

Avec un peu de violon, j’ai réussi à obtenir ce qui suit:

http://jsfiddle.net/jbK6a/12/

En utilisant cela, le sélecteur de date se cache lors du défilement de page. Je crois qu’il existe des méthodes jQuery pour déterminer la position du défilement. Ainsi, avec un peu plus de bidouillage, vous pouvez ensuite manipuler manuellement le sélecteur de date et mettre à jour sa position en fonction de cette valeur …

UPDATE : Juste un peu bidouillé et obtenu: http://jsfiddle.net/jbK6a/18/ qui fait défiler le datepicker, mais c’est vraiment désordonné, un certain nombre de choses peuvent le casser, en particulier d’autres éléments réductibles. Heureusement, Sem a une solution bien meilleure et plus propre 🙂

(Je pensais append mon code quand même)

Pour résoudre ce problème dans jQuery UI 1.11.4, j’ai ajouté un événement .bind () à la fin de l’instanciation datepicker:

 $("*selector*").datepicker({ *settings* }).bind('click',function () { $("#ui-datepicker-div").appendTo("*other-selector*"); }); 

Dans mon cas, le “sélecteur-autre” était $ (this) .closest (‘ the-date-input-parent ‘). Cela récupère la boîte unique # ui-datepicker-div (que jQuery UI place à la fin du DOM) et la déplace vers un emplacement autre que dans le document. Cela peut être fait pour plusieurs datepickers sur la même page.

L’ autre sélecteur doit avoir la position: relative; défini de manière à ce que le # ui-datepicker-div positionné de manière absolue soit positionné par rapport au nouveau parent. Une fois, cela défile parfaitement.

Cette solution était la solution la plus simple à ce problème (bien que cela prenne beaucoup de temps et cherchait à arriver à cette conclusion) et permettait au datpicker de fonctionner correctement sur les appareils mobiles et les tablettes où il serait autrement inutilisable.

Impossible de trouver des réponses à ce problème à l’aide de Bootstrap et de datepicker qui rencontraient un problème de datepicker restant attaché à l’élément lors du défilement sur un modal. C’était ma solution:

  var dateModals = (function() { 'use ssortingct'; var currentInput = ''; var setPos = function() { if (currentInput === '') return false; var $datepicker = $('.datepicker'); var topPos = currentInput.offset().top + currentInput.outerHeight(); if ($datepicker.hasClass('datepicker-orient-bottom')) { topPos -= $datepicker.outerHeight() + currentInput.parent('.date').outerHeight(); } $datepicker.css('top', topPos); }; var attachEvents = () => { $('.modal').on('scroll', function() { setPos(); }); $('.modal').on('click', '.date input.form-control', function() { currentInput = $(this); }); }; var initialize = (function() { attachEvents(); })(); })(); 

Si vous suivez la syntaxe Bootstrap & Datepicker, cela devrait bien fonctionner.

Il suffit de supprimer height: 100% rule du sélecteur html. Cela résout le problème.