jQuery UI den Datapicker immer in eine bestimmte Richtung öffnen?

Question

Ich benutze jQuery UI's Datepicker-Steuerelement in einer position: fixed Symbolleiste am unteren Rand meiner Seite. Gelegentlich wird auf zufälligen Computern der Datumszeiger unter der Symbolleiste angezeigt, was bedeutet, dass er sich nicht auf der Seite befindet und nicht angezeigt oder mit ihm interagieren kann.

Gibt es eine Möglichkeit, die Positionierung des Datepicker-Steuerelements immer oberhalb und rechts von dessen <input> zu erzwingen?

Answer 1

könnten Sie die Linien ändern:

offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0; 
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0; 

... zu lesen:

offset.left = $(inst.input).position().left + dpWidth; 
offset.top = $(inst.input).position().top - dpHeight; 

Diese Flexibilität verliert, though. Wenn sich Ihre Eingabe am Anfang der Seite befindet, haben Sie das umgekehrte Problem.

Answer 2

Aus der Dokumentation sieht es so aus, als könnten Sie das 'dialog' method des Datepicker-Plugins verwenden, um das gewünschte Ergebnis zu erzielen. Dies bedeutet jedoch höchstwahrscheinlich, dass Sie etwas von dem Kleber implementieren müssen, den Sie sonst mit dem Datepicker erhalten würden, wie zum Beispiel ein Callback-Handler, um das Datum zu extrahieren, etc.

Ich habe es versucht um etwas Code nachzuahmen, um es in Aktion zu sehen und kurz davor, den Datepicker zur Anzeige zu bringen, konnte ich es jedoch nicht richtig zum Laufen bringen. Jedenfalls wollte ich Sie darauf hinweisen, falls Sie mehr Glück haben als ich.

Answer 3

Problem ist, dass das Element in der Position: fixed zeigen obere Position 0px (überprüfen mit: alert $ ('# datepicker2'). Position()).

Lösung:

$('#datepicker').datepicker({beforeShow: function(input) { 
    var x = 100; //add offset 
    var y = 20; 
    field = $(input); 
    left = field.position().left + x; 
    bottom = y; 
    setTimeout(function(){ 
     $('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});  
    },1);      
}} 

Test-HTML:

<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action=""> 
    <label> 
    <input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker"> 
    </label> 
</form> 

Answer 4

Der einzige Weg, um sicher zu sein (für die jQueryUI Version von picker) ist die Funktionalität des Datepicker zu deaktivieren, die im Innern zu machen versucht, das Ansichtsfenster. Hier ist ein Weg, es zu tun, ohne die Quellcodedateien zu ändern:

$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}}); 

auf spätere Versionen von JQuery UI Versuch:

$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}}); 

Das ist nur die _checkOffset Funktion innerhalb picker Nukes, die es squirrelly macht. Dann können Sie den .ui-datepicker css verwenden, um sicherzustellen, dass es fest bleibt, wenn Sie das wollen. Weitere Informationen unter how-to-control-positioning-of-jqueryui-datepicker.

Answer 5

http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php

Check dies. Ich benutzte dies und konnte das Datepicker Control in allen Browsern positionieren.

Answer 6

Ich hatte ein ähnliches Problem. Ich habe eine Seite mit Datumsauswahlmöglichkeiten, die möglicherweise an verschiedenen Stellen auf der Seite verwendet werden, aber auch an einer festen Kopfzeile, wo der Benutzer die Seite sowohl horizontal als auch vertikal scrollen kann, wobei die feste Kopfzeile an Ort und Stelle bleibt. Der Header hat auch einen Datumsauswahl. Also kann ich den Datapicker nicht global verändern.

Das habe ich gemacht. Es ist zugegebenermaßen ein Kluge, aber es funktioniert so, dass ich dachte, es könnte jemand anderem helfen.Hoffentlich wird der jquery Datepicker in Zukunft eine Positionsoption hinzufügen.

beforeShow: function(input, inst) { 
    $("#ui-datepicker-div").css({ "visibility": "hidden", "display": "none"); 

    window.setTimeout(function() { 
     var leftPosition = parseInt($(window).width()/2); 
     $("#ui-datepicker-div").css({ "position": "fixed", "top": 0, "left": leftPosition }); 
     $("#ui-datepicker-div").css({ "visibility": "visible", "display": "inherit"); 
    }, 500); 
}