8
votes

JQuery UI DatePicker Positionnement Problème lors du défilement

J'ai une page Web qui utilise plusieurs instances de la jQuery UI DatePicker. Ma page Web affiche ~ 80 enregistrements qui s'étend au-delà d'une seule capture d'écran.

    $(".date-pick").each(function() {
    $(this).datepicker({
        dateFormat: 'dd M yy',
        showOn: 'button',
        buttonImage: '/Images/datepickericon.png',
        buttonImageOnly: true
        });
    });

jquery datepicker jquery-ui

0 commentaires

11 Réponses :

1
votes

Je ne suis pas sûr que ce serait le problème, mais vous attachez le daysicker de manière non standard. Vous n'avez pas besoin de itérer avec. Chercher ();

$("input.date-pick").datepicker({
    dateFormat: 'dd M yy',
    showOn: 'button',
    buttonImage: '/Images/datepickericon.png',
    buttonImageOnly: true
});

2 commentaires

Merci pour des conseils sur l'utilisation .Chaque () et toujours qualifier la balise pour accélérer le processus de sélection. Après avoir fait ces changements, j'ai toujours le problème que j'ai décrit dans mon poste.

Cela ne traite pas de la question / problème des affiches.

7
votes

Je pense que j'ai réussi à résoudre mon problème, mais je pense en même temps que j'ai peut-être découvert un bogue (?) Dans le code JQuery UI DaidPicker.

Avant d'aller plus loin, laissez-moi simplement dire que je suis nouveau à JQuery / JavaScript et j'apprécierais toute entrée sur ci-dessous. p>

Pour résumer le problème, j'utilise ASP.NET MVC et I J'essaie d'afficher ~ 80 DaysPickers sur une page. Pour n'importe quel satdatPicker dans la fenêtre initiale, la position de datepickers est bien. Cependant, lorsque je fais défiler vers le bas, les satchickers sont toujours rendus près du sommet de l'écran. P>

J'ai commencé à afficher le code source et à faire du débogage. Ce que j'ai remarqué, c'est que la mesure dans laquelle la date picker a été compensée vers le haut de l'écran était directement proportionnelle au montant que j'avais défilé, c'est-à-dire davantage de défilement = plus de décalage. P>

Le problème clé du code J'ai trouvé (voir ci-dessous) est que lorsque le code fonctionne de l'emplacement où positionner la datePicker, il ne prend pas en compte à quelle distance l'écran a défilé par l'écran: P>

  $.datepicker._pos[1] += input.offsetHeight + document.documentElement.scrollTop; //add the height

3 commentaires

Suivez exactement ce que vous avez fait, mais je ne peux pas résoudre mon problème. Toute suggestion?

Je n'ai aucune autre idée que j'ai peur? Je note que certaines des autres réponses sont assez récentes, alors peut-être qu'elles peuvent aider?

@Panadolchong en quelque sorte document.documentaelement.scrolltop ne fonctionnait pas aussi bien pour moi, peut-être parce que c'était dans un iframe, mais Document.body.scrolltop a travaillé.

1
votes

J'ai rencontré le même problème sur une application que je travaille et j'ai trouvé une solution. L'application n'a pas contenté de spécification de type DOC appropriée et que tout ce qui était nécessaire était de l'ajouter au sommet de la page.

<!DOCTYPE html>

0 commentaires

-1
votes

La fenêtre contextuelle DatePicker-UI peut être fabriquée en ajoutant le code suivant:

$ ('# ui-date-datepicker-div'). Draggable ();

Comme cet identifiant s'applique au composant divisé créé pour tous les PopUp DatePickers de la page. Alors que:

$ ("ui-date-datePicker"). Draggetable ()

s'applique à tous les pickkers sur une page (complets ou en ligne). En faisant le panneau glissant, vous pouvez généralement positionner le satlepicker où vous le souhaitez sans défilement.

0 commentaires

3
votes

J'avais aussi ces problèmes dans IE 9 et je ne peux pas vous remercier suffisamment pour votre aide collective. Chrome 22.0.1229.94 M et FF 15.0.1 n'ont pas présenté ce problème pour moi.
J'ai d'abord essayé de forcer à savoir 8 émulation avec une balise méta xxx
en vain.
J'ai ensuite édité le fichier jquery.ui.datepicker.js comme suggéré de régler la hauteur de la position en comptant le défilement. Cela n'a pas fonctionné non plus.
enfin j'ai changé mon doctype de xxx
à

qui a fonctionné avec succès !!
J'ai supprimé la balise méta qui a forcé IE 8 Emulation, mais a conservé les modifications que j'ai apportées au fichier DatePicker JS. Mon succès pourrait être une combinaison des JS édités et du changement de DOCTYPE, ou simplement le changement de DOCTYPE.
1 commentaires Thnkx, ça m'a aidé aussi!
9 votes J'ai aussi eu le même problème, j'utilise IE9 mais à l'aide d'utiliser document.documenter.scrolltop code> i Modifier la ligne Follwing sur mon code JS $.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop; 2 commentaires Suivez exactement ce que vous avez fait, mais je ne peux pas résoudre mon problème. Toute suggestion? Je n'avais pas non plus de valeur pour document.documentation.scrolltop. Le bit de code de code.body.scrolltop dans cette réponse a résolu mon problème d'accord pour IE9 et IE8. 3 votes J'ai rencontré le même problème avec JQuery UI version 1.9.2 et IE9. Il semble y avoir une fonction dans jQuery ui intitulé _checkoffset qui est destiné à prendre en charge ce problème. Ça ne marche pas. Il tente d'utiliser $ (document) .Scrolltop () , qui semble toujours retourner 0 dans IE9. J'ai dû modifier le contenu de la fonction pour utiliser document.body.scrolltop lorsque la fonction JQuery renvoie zéro. Ainsi remplacer xxx avec xxx partout dans _CheckOffset afin de "corriger" jQuery Ui et faites fonctionner correctement. 1 commentaires Probablement bien, mais notez que votre logique || évaluera au côté droit de l'opérateur dans le cas où $ (document) .Scrolltop () retourne correctement zéro. 1 votes Hey Voici un piratage que pouvons-nous être utilisés pour résoudre ce problème. $(".ui-datepicker-trigger").on("click", function() { var self; if ($.browser.msie) { self = $(this); $("#ui-datepicker-div").hide(); setTimeout(function(){ $("#ui-datepicker-div").css({ top: self.offset().top + $('html').scrollTop() + 30 }); $("#ui-datepicker-div").show(); }, 0); } }); 3 commentaires Remarque ici que .ui-datationPicker-Trigger doit être remplacé par la référence de votre formulaire de widget, par exemple. $ ("# mywidget"). ... Aussi De plus, j'ai trouvé que je devais utiliser document.body.scrolltop plutôt que $ ('html'). Scrolltop () . (En utilisant IE8, éventuellement d'autres versions ont également besoin de ce changement.) 2 votes dans jquery.ui, il suffit de mettre à jour la fonction _CheckOffset, de sorte que la vieilleheight est ajoutée à offset.top, avant que le décalage est renvoyé. script: datePicker.js xxx 1 commentaires Utilisation de ce code, je suis capable de résoudre le problème dans IE9 et à l'aide de JQuery UI 1.9.2 DatePicker 0 votes Allez d'abord ici et formatez votre fichier JS dans magnifique javascript Aller à la ligne n ° 445 xxx 0 commentaires 0 votes Cela a fonctionné pour moi: xxx afin que le code final soit: xxx 0 commentaires

Articles qui pourrait vous intéresser : Select2 ne s'affiche pas correctement dans le mode bootstrap datetimepicker ne fonctionne pas avec bootstrap 4? L'appel Ajax n'affiche pas de réponse en cas de succès django admin - Comment ajouter du javascript à la fin d'un fichier