Forcer le sélecteur de date jQuery UI Datepicker à s’afficher sous le champ de saisie

J’ai une page qui contient un formulaire et quelques champs. Mes problèmes sont les suivants:

  1. J’essaie de forcer le sélecteur de date jQuery UI à s’afficher sous le champ de saisie.
  2. Lorsque je clique dans le champ de saisie, je souhaite également que le champ défile jusqu’en haut de la page. Je pense que cela fonctionne.

Voici mon jQuery:

JQUERY:

$( document ).ready(function() { // Set Datepicker $(".datepicker").datepicker(); $("input").focus(function () { $('html, body').animate({ scrollTop: $(this).offset().top - 25 }, 10); }); }); 

Lien vers un violon: https://jsfiddle.net/MauriceT/0qfycgm1/10/

Voici ce que je veux éviter:

Datepicker s’affiche au-dessus du champ de saisie

Toutes les suggestions seraient grandement appréciées. Merci!

vous pouvez atteindre votre objective en définissant le css du sélecteur de date.

Utilisez le code ci-dessous pour définir le CSS. L’utilisation de setTimeout consiste à éviter le remplacement du CSS.

Ici, je découvre le haut et la gauche de la zone de texte du sélecteur de date / heure et utilise ces valeurs pour définir la position du sélecteur de date / heure popup

Pour plus d’informations sur l’événement beforeShow, cliquez ici.

https://api.jqueryui.com/datepicker/#option-beforeShow

  $(".datepicker").datepicker({ beforeShow: function (input, inst) { setTimeout(function () { inst.dpDiv.css({ top: $(".datepicker").offset().top + 35, left: $(".datepicker").offset().left }); }, 0); } }); 

Voici le violon: https://jsfiddle.net/0qfycgm1/14/

Une solution simple consiste à ajuster l’interface à l’aide de CSS pour la boîte CALENDER.

Ajoutez ce qui suit à votre fichier CSS.

  .ui-datepicker{ margin-top: 300px; } 

Je l’ai essayé dans votre lien Fiddle, fonctionnait parfaitement bien.

append

  ui-datepicker{ margin-top: 0px; } 

J’ai ajouté ce code à votre violon et l’ai testé. espérons que cela aidera. ont mis à jour votre violon

La ligne de code suivante de jquery-ui- (version) définit la position supérieure de votre object sur zéro, de sorte qu’il s’affiche de manière erronée.Commentez la ligne de code pour obtenir ce que vous voulez. Je passe beaucoup de jours à trouver la meilleure solution.

offset = $ .datepicker._checkOffset (inst, offset, isFixed);