Force jQuery UI Datepicker zur Anzeige unter Eingabefeld

Ich habe eine Seite, die ein Formular und einige Felder enthält. Meine Fragen sind wie folgt:Force jQuery UI Datepicker zur Anzeige unter Eingabefeld

Ich versuche, jQuery UI Datepicker zu zwingen, unter dem Eingabefeld angezeigt werden soll.
Wenn ich in das Eingabefeld klicke, möchte ich, dass das Feld auch zum Anfang der Seite scrollt. Ich denke, ich arbeite daran.

Hier ist meine jQuery:

JQUERY:

$(document).ready(function() { 
    // Set Datepicker 
    $(".datepicker").datepicker(); 

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

});

Link zu einer Geige: https://jsfiddle.net/MauriceT/0qfycgm1/10/

Hier ist, was ich vermeiden wollen:

Datepicker displays above the input field

Alle Vorschläge würden sehr geschätzt werden. Vielen Dank!

Quelle

2016-07-15 Maurice Twomey

was meinst du mit unter dem Eingang? Soll das Eingabefeld über die Datumsauswahl gelegt werden? – Deep

Also ich brauche den Datepicker, um unter dem Feld anzuzeigen, egal was. Im Moment, wenn Sie auf den Datums-Picker klicken und Platz über dem Feld ist, erscheint der Datums-Picker über dem Feld. Klicken Sie auf den Link im Bild meiner Frage für eine visuelle. Vielen Dank! –

aktualisiert Sie können Ihr Ziel erreichen, indem Sie die CSS des Datumsauswahl Pop.

Verwenden Sie den folgenden Code, um das CSS festzulegen, die Verwendung von SetTimeout soll das Überschreiben des CSS vermeiden.

Hier bin ich der Suche nach der besten ab und von dem Datum Zeitauswahl Textfeld links und diese Werte mit der Position des Datumszeitauswahl Popup einstellen

Auf der Informationen über beforeShow Event Check hier.

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); 
    } 
});

Hier ist die Geige: https://jsfiddle.net/0qfycgm1/14/

Quelle

2016-07-15 16:06:17 Deep

Danke, Tief! Du bist ein Genie! :) –

@MauriceTwomey Sie sind herzlich willkommen :) – Deep

Eine einfache Lösung ist die Anpassung des Frontends mittels CSS für die CALENDER Box.

Fügen Sie Ihrer CSS-Datei Folgendes hinzu:

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

Ich versuchte es in Ihrem Fiddle-Link, war völlig in Ordnung.

Quelle

2016-07-15 15:14:38

Danke für Ihre Antwort, Ankush! Ich bin mir jedoch nicht sicher, ob dies eine robuste Lösung ist. Wenn ich die Seite herunterscrolle und den Datumsauswahlpunkt wähle, erscheint der Datumsauswahlpunkt 300 Pixel unter dem Feld. Ich brauche etwas Dynamisches. –

Von dem, was ich verstehe, erscheint die CALENDER-Box über dem Eingabefeld für die Datumsauswahl, aber Sie möchten, dass es darunter angezeigt wird. Ist es so oder möchtest du etwas anderes? –

Oh, ich bekomme das SCROLL-Problem, das du erwähnt hast. Bei Top-Margin bleibt es bestehen: auch bei 0px und damit funktioniert Jayanti Lals Lösung auch nicht. –

hinzufügen

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

Ich habe diesen Code in Ihre Geige hinzugefügt und haben es getestet. hoffe, das wird helfen. haben Ihre fiddle

Quelle

2016-07-15 15:52:17

folgende Codezeile aus jquery-UI- (version) setzt Ihr Objekt Top-Position Null zu sein, so wird es angezeigt wrong.Comment die Codezeile erhalten Sie, was Sie wollen. Ich habe viele Tage damit verbracht, keine bessere Lösung zu finden.

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

Quelle

2017-09-12 11:45:46

Force jQuery UI Datepicker zur Anzeige unter Eingabefeld

Antwort

Verwandte Themen