jQuery DatePicker ne se déplace pas avec du contenu HTML lorsque dans un div défilant

J'ai un formulaire dont la taille est restreinte et le style de débordement défini pour faire défiler. Ce formulaire contient plusieurs DatePickers. Si j'ouvre un de DatePicker puis faites défiler le panneau (avec la molette de défilement qui garde le focus sur le DatePicker pour qu'il reste ouvert) le DatePicker ne bouge pas avec le champ de formulaire auquel il est attaché. Voir mon exemple ci-dessous bien travailler:jQuery DatePicker ne se déplace pas avec du contenu HTML lorsque dans un div défilant

<html> 
    <head> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script> 
    </head> 
    <body> 
    <div style="width: 200px; height: 200px; overflow: scroll"> 
<script type="text/javascript"> 
    $(function() { 
    $('#datepicker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showOn: 'button', 
     changeMonth: true, 
     changeYear: true, 
     buttonImageOnly: true, 
     dateFormat: 'dd M yy', 
     buttonText: 'Click' 
    }); 
    }); 
</script> 
     <div class="demo"> 
     <p>Date: 
      <input type="text" id="datepicker"> 
     </p> 
     </div> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
    </div> 
    </body> 
</html>

Actuellement, le datepicker est fixé en place par rapport à la fenêtre du navigateur et non le champ d'entrée de déclenchement. Quelqu'un peut-il m'aider à garder le contrôle DatePicker ouvert et au même endroit par rapport à son champ de saisie de déclenchement lorsque le formulaire est défilé?

Merci

Edit: Clarifiée le titre et explaination situation.

Edit: fixer le texte de synthèse

Source

2009-12-07 Keith K

La solution complète utilisée est la suivante:

var dtPckr = $('#datepicker') 

$(".demo").scroll(function() { 
    dtPckr.datepicker('hide'); 
}); 

$(window).resize(function() { 
    dtPckr.datepicker('hide'); 
});

Cette étend la solution postée par Nick C en ajoutant le gestionnaire de redimensionnement de la fenêtre pour masquer le calendrier. Cela devrait couvrir tous les cas où le contenu se déplacera par rapport au datpicker affiché.

Source

2010-01-28 17:11:56

Le datepicker est fixé à un récipient, l'élément de corps dans tous les cas comme du widget 1.7.2. Malheureusement, cela signifie non, ce n'est pas un problème réparable dans un div qui défile. This came up on the jQuery groups mailing list a while back.

Une alternative serait de fermer le sélecteur de date lorsque vous faites défiler la div donc il y a au moins aucun artefact visuel passe:

$(".demo").scroll(function() { 
    $('#datepicker').datepicker('hide'); 
});

Source

2010-01-14 03:12:27

jQuery DatePicker ne se déplace pas avec du contenu HTML lorsque dans un div défilant

Répondre

Questions connexes