bootstrap-datepicker n'a pas de défilement pour faire défiler les modes de

Je suis en utilisant bootstrap-datepicker et souhaitez afin d'afficher la date-picker sur le modèle de bootstrap 2. Le problème que j'ai est la date-picker est pas le défilement en conséquence lors du défilement de la modal, il est toujours resté.

Le code:

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<div id="myModal" class="modal hide fade" style="height: 400px; overflow: scroll">
    <div style="height:300px"></div>
    <div>Choose Date:
        <input class="calendar" />
    </div>
    <div style="height:300px"></div>
</div>

et javascript:

var datePicker = $(".calendar").datepicker({});

La jsfiddler: http://jsfiddle.net/csrA5/

Est qu'il ya une solution pour le faire défiler lors du défilement de la modal?

OriginalL'auteur cuongle | 2013-12-10

10

Il y a une option datepicker('place') à la position de mise à jour . J'ai mis à jour jsfiddle
```
var datePicker = $(".calendar").datepicker({});
var t ;
$( document ).on(
    'DOMMouseScroll mousewheel scroll',
    '#myModal', 
    function(){       
        window.clearTimeout( t );
        t = window.setTimeout( function(){            
            $('.calendar').datepicker('place')
        }, 100 );        
    }
);
```
cela fonctionne quand il y a de la barre de défilement. par exemple si j'ai bootstrap modal qui occupe tout l'écran et sélecteur de date dans la dernière ligne. Comment gérer cette situation. datepicker passe en dessous de l'écran.
J'ai juste ajouté le défilement se lier à l'modal au lieu du document. Mais il fonctionne très bien. Merci!!
S'il vous plaît regardez ce violon.J'ai utilisé ce pour un problème similaire stackoverflow.com/questions/12351871/... jsfiddle.net/jbK6a/15

OriginalL'auteur rab

Voici une autre manière à l'aide de jQuery

var checkout = $(".calendar").datepicker({});
$( "#myModal" ).scroll(function() {
    $('.calendar').datepicker('place')
});

la caisse variable est maintenant utilisé?

OriginalL'auteur A Paul

Essayez d'ajouter l'événement de défilement dans bootstrap-datepicker.js la fonction "Datepicker.prototype"

[$(window), {
                resize: $.proxy(this.place, this),
                scroll: $.proxy(this.place, this)
            }]

OriginalL'auteur Ch Ra

0

Je ne sais pas pourquoi, mais le positionnement est basé sur le défilement de sorte que vous besoin de trouver ce code dans bootstrap-datepicker.js
```
scrollTop = $(this.o.container).scrollTop();
```
et réécrire à
```
scrollTop = 0;
```
Cela m'a aidé, j'espère que ça aidera d'autres personnes.

OriginalL'auteur user3434437
0

Fournies par la Solution de rab fonctionne, mais pas encore parfait comme le datepicker scintille au défilement de bootstrap modal. J'ai donc utilisé le jquery événement scroll pour atteindre lisses un changement de position de datepicker.
Voici mon code:
```
    $( document ).scroll(function(){
        $('#modal .datepicker').datepicker('place'); //#modal is the id of the modal
    });
```
OriginalL'auteur SudarP
0

J'ai moi aussi été confronté au même problème lors de l'utilisation de bootstrap datepicker dans mon projet. J'ai utilisé une autre méthode où en j'ai créé un caché couche transparente à l'intérieur de la datepicker modèle à l'intérieur de bootstrap-datepicker.js (avec classname 'couche cachée-datepicker') et a donné de position fixe et occupant toute la hauteur et la largeur de l'html.
```
    DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days">
```
Maintenant, quand le datepicker modale apparaît, le calque nouvellement créé occupera toute la largeur de la page et la hauteur, et lorsque l'utilisateur fait défiler depuis le modal est ajouté au corps, le datepicker modal trop défile avec elle. Avec l'introduction de la nouvelle couche, à l'intérieur de défilement du récipient dans lequel le datepicker champ de saisie est présente, seront annulés pendant la modale est ouvert.

Plus qu'une chose à faire est de mettre à jour le datepicker modal de clôture de l'événement en cliquant sur la couche cachée et qui est effectué à l'aide du code ci-dessous à l'intérieur de bootstrap-datepicker.js.
```
    //Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        (this.picker.find(e.target).length && e.target.className != "hidden-layer-datepicker") ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )){
                        this.hide();
                    }
```
OriginalL'auteur Nithin Chacko
0

J'ai rencontré ce problème aussi avec Stefan Petre version de Bootstrap-datepicker (https://www.eyecon.ro/bootstrap-datepicker), le problème est le Datepicker élément est fixé au corps ce qui signifie qu'il va défiler avec le corps, bien dans la plupart des cas, mais lorsque vous avez un défilement modale vous avez besoin de joindre le Datepicker pour le défilement modal de la div au lieu de cela, donc ma solution était de changer de Stefan bootstrap-datepicker.js comme suit -

à la ligne 28, changement
```
  .appendTo('body')
```
à
```
  .appendTo(element.offsetParent)
```
et la ligne 153, changement
```
  var offset = this.component ? this.component.offset() : this.element.offset();
```
à
```
  var offset = this.component ? this.component.position() : this.element.position();
```
Premiers tests montrent qu'il défile à la perfection.

En outre, vous devrez peut-être modifier l'ordre de superposition des Datepicker élément pour le faire s'asseoir au-dessus de la modal (c'était mon premier correctif qui ne traitent pas de défilement, je n'ai pas soutenu ce changement et donc ne sais pas si c'est encore nécessaire)

Je n'y vérifié mais je crois que la version de Github Bootstrap-datepicker.js est en train de faire la même chose (le code source est très différent de ce que j'ai de Stefan)

OriginalL'auteur steve

Vous devez vous connecter pour publier un commentaire.