it-swarm.com.de

So ändern Sie die Popup-Position des jQuery DatePicker-Steuerelements

Haben Sie eine Idee, wie der DatePicker am Ende des zugehörigen Textfelds angezeigt werden kann, anstatt direkt darunter? In der Regel geschieht dies, wenn sich das Textfeld am unteren Rand der Seite befindet und der DatePicker zu seinem Konto wechselt und das Textfeld vollständig abdeckt. Wenn der Benutzer das Datum eingeben möchte, anstatt ihn auszuwählen, kann er nicht. Ich würde es lieber gleich nach dem Textfeld anzeigen lassen, so dass es egal ist, wie es vertikal angepasst wird.

Irgendeine Idee, wie man die Positionierung steuert? Ich habe keine Einstellungen für das Widget gesehen, und ich hatte kein Glück, die CSS-Einstellungen zu ändern, aber ich könnte leicht etwas vermissen.

96
gfrizzle

Die akzeptierte Antwort auf diese Frage gilt eigentlich nicht für den jQuery UI Datepicker. Um die Position des jQuery UI Datepicker zu ändern, ändern Sie einfach .ui-datepicker in der css-Datei. Die Größe des Datepickers kann auch auf diese Weise geändert werden. Passen Sie einfach die Schriftgröße an.

26
jonmc12

Hier ist was ich verwende:

$('input.date').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'});
    }
});

Möglicherweise möchten Sie auch ein wenig mehr am linken Rand hinzufügen, damit er nicht direkt am Eingabefeld liegt.

117
Sean CH

Ich mache es direkt im CSS:

.ui-datepicker { 
  margin-left: 100px;
  z-index: 1000;
}

Meine Datumseingabefelder sind alle 100px breit. Ich habe auch den Z-Index hinzugefügt, sodass der Kalender auch über den Popup-Fenstern AJAX angezeigt wird.

Ich ändere die CSS-Datei jquery-ui nicht. Ich überlade die Klasse in meiner CSS-Hauptdatei, sodass ich das Design ändern oder das Widget aktualisieren kann, ohne meine spezifischen Mods erneut eingeben zu müssen.

38

Hier ist meine Variation des Datepicker-Kalenders. 

Ich denke, dass es ziemlich schön ist, denn Sie können die Positionierung über jQuery UI Position util steuern.

Eine Einschränkung: jquery.ui.position.js ist erforderlich.

Code:

$('input[name=date]').datepicker({
    beforeShow: function(input, inst) {
        // Handle calendar position before showing it.
        // It's not supported by Datepicker itself (for now) so we need to use its internal variables.
        var calendar = inst.dpDiv;

        // Dirty hack, but we can't do anything without it (for now, in jQuery UI 1.8.20)
        setTimeout(function() {
            calendar.position({
                my: 'right top',
                at: 'right bottom',
                collision: 'none',
                of: input
            });
        }, 1);
    }
})
30
Rost

Hier ist eine weitere Variante, die für mich gut funktioniert. Richten Sie rect.top + 40, rect.left + 0 nach Ihren Bedürfnissen ein:

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'mm/dd/yy',
    beforeShow: function (input, inst) {
        var rect = input.getBoundingClientRect();
        setTimeout(function () {
	        inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
        }, 0);
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<form>
<input class="datepicker" name="date1" type="text">
<input class="datepicker" name="date2" type="text">
</form>

22
Patrick

Das funktioniert für mich:

 beforeShow: function(input, inst) {
     var cal = inst.dpDiv;
     var top  = $(this).offset().top + $(this).outerHeight();
     var left = $(this).offset().left;
     setTimeout(function() {
        cal.css({
            'top' : top,
            'left': left
        });
     }, 10);
15
David Laberge

Zunächst denke ich, dass es im Datepicker-Objekt eine afterShowing-Methode geben sollte, bei der Sie die Position ändern können, nachdem Jquery alle seine Voodoo-Funktionen in der _showDatepicker-Methode ausgeführt hat. Außerdem wäre ein Parameter mit dem Namen preferedPosition wünschenswert, so dass Sie ihn festlegen und ändern können, falls das Dialogfeld außerhalb des Darstellungsbereichs gerendert wird.

Es gibt einen "Trick", um das Letzte zu tun. Wenn Sie die _showDatepicker-Methode studieren, wird die Verwendung einer privaten Variablen $.datepikcer._pos angezeigt. Diese Variable wird eingerichtet, wenn sie noch nicht eingerichtet wurde. Wenn Sie diese Variable vor dem Anzeigen des Dialogfelds ändern, nimmt Jquery das Fenster an und versucht, das Dialogfeld an dieser Position zuzuweisen. Wenn es sich außerhalb des Bildschirms befindet, wird es angepasst, um sicherzustellen, dass es sichtbar ist. Hört sich gut an, wie?

Das Problem ist; _pos ist privat, aber wenn Sie nichts dagegen haben. Sie können:

$('input.date').datepicker({
    beforeShow: function(input, inst)
    {
        $.datepicker._pos = $.datepicker._findPos(input); //this is the default position
        $.datepicker._pos[0] = whatever; //left
        $.datepicker._pos[1] = whatever; //top
    }
});

Seien Sie jedoch bei Jquery-ui-Updates vorsichtig, da eine Änderung in der internen Implementierung von _showDatepicker Ihren Code beschädigen kann.

6
monzonj

Ich musste den Datepicker gemäß einem übergeordneten div positionieren, in dem sich die Eingabedatei ohne Grenzen befand. Um dies zu tun, habe ich das "position" -Dienstprogramm verwendet, das im jquery-UI-Core enthalten ist. Ich habe dies im beforeShow-Event gemacht. Wie bereits erwähnt, können Sie die Position nicht direkt in beforeShow festlegen, da der Datepicker-Code die Position nach Abschluss der beforeShow-Funktion zurücksetzt. Um dies zu umgehen, setzen Sie einfach die Position mit setInterval. Das aktuelle Skript wird mit der Datumsauswahl abgeschlossen und der Neupositionierungscode wird sofort ausgeführt, nachdem die Datumsauswahl sichtbar ist. Sollte der Datepicker nach 0,5 Sekunden nicht sichtbar sein, verfügt der Code über eine Sicherheitsfunktion zum Aufgeben und Löschen des Intervalls.

        beforeShow: function(a, b) {
            var cnt = 0;
            var interval = setInterval(function() {
                cnt++;
                if (b.dpDiv.is(":visible")) {
                    var parent = b.input.closest("div");
                    b.dpDiv.position({ my: "left top", at: "left bottom", of: parent });
                    clearInterval(interval);
                } else if (cnt > 50) {
                    clearInterval(interval);
                }
            }, 10);
        }
3

binden Sie den Fokus nach der Verwendung von datepicker

$('input.date').datepicker();
$('input.date').focusin(function(){
    $('input.date').datepicker('widget').css({left:"-=127"});
});
2
anubiskong

ich habe es mit meinem benutzerdefinierten Jquery-Code behoben.

  1. gab meinem Datepicker-Eingabefeld eine Klasse ".datepicker2"

  2. finde seine aktuelle Position von oben und

  3. positionierte das Popup-Feld mit dem Klassennamen ".ui-datepicker"

hier ist mein code.

$('.datepicker2').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

hier ist "40" mein erwartetes Pixel, das Sie mit Ihrem ändern können.

2
sh6210

Ich nahm es von (( So steuern Sie die Positionierung von jQueryUI datepicker ))

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

es klappt !!!

1
masoud Cheragee

fix position position problem daterangepicker.jQuery.js behoben

//Original Code
//show, hide, or toggle rangepicker
    function showRP() {
        if (rp.data('state') == 'closed') {
            rp.data('state', 'open');
            rp.fadeIn(300);
            options.onOpen();
        }
    }


//Fixed
//show, hide, or toggle rangepicker
    function showRP() {
        rp.parent().css('left', rangeInput.offset().left);
        rp.parent().css('top', rangeInput.offset().top + rangeInput.outerHeight());
        if (rp.data('state') == 'closed') {
            rp.data('state', 'open');
            rp.fadeIn(300);
            options.onOpen();
        }
    }
1
zersina

Sie haben den Klassennamen in ui-datepicker-trigger geändert.

Das funktioniert also in jquery 1.11.x

.ui-datepicker-trigger { 
margin-top:7px;
  margin-left: -30px;
  margin-bottom:0px;
  position:absolute;
  z-index:1000;
}
1
Marc

Eine sehr einfache Jquery-Funktion.

$(".datepicker").focus(function(event){
                var dim = $(this).offset();
                $("#ui-datepicker-div").offset({
                    top     :   dim.top - 180,
                    left    :   dim.left + 150
                });
            });
1
Harry

Ich habe eine lächerliche Zeit damit verbracht, dieses Problem für mehrere Seiten einer neuen Website herauszufinden, die ich gerade entwickle, und es schien nichts zu funktionieren (einschließlich der verschiedenen oben genannten Lösungen, die ich implementiert habe. Ich denke, jQuery hat sich gerade geändert genug, da ihnen vorgeschlagen wurde, dass die Lösungen nicht mehr funktionieren. Ich weiß nicht. Ehrlich gesagt, ich verstehe nicht, warum in jQuery nicht etwas einfaches implementiert ist, um dies zu konfigurieren, wie es scheint ein ziemlich großes Problem, bei dem der Kalender immer an einer Position auftaucht, die weit von der Eingabe entfernt ist, an die er angehängt ist.

Jedenfalls wollte ich eine Endlösung, die generisch genug ist, um sie überall einsetzen zu können und funktionieren würde. Ich bin anscheinend zu einer Schlussfolgerung gekommen, die einige der komplizierteren und jQuery-Code-spezifischen Antworten oben vermeidet:

jsFiddle: http://jsfiddle.net/mu27tLen/

HTML:

<input type="text" class="datePicker" />

JS:

positionDatePicker= function(cssToAdd) {
    /* Remove previous positioner */
    var oldScript= document.getElementById('datePickerPosition');
    if(oldScript) oldScript.parentNode.removeChild(oldScript);
    /* Create new positioner */
    var newStyle= document.createElement("style");
    newStyle.type= 'text/css';
    newStyle.setAttribute('id', 'datePickerPostion');
    if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd;
    else newStyle.appendChild(document.createTextNode(cssToAdd));
    document.getElementsByTagName("head")[0].appendChild(newStyle);
}
jQuery(document).ready(function() {
    /* Initialize date picker elements */
    var dateInputs= jQuery('input.datePicker');
    dateInputs.datepicker();
    dateInputs.datepicker('option', {
        'dateFormat' : 'mm/dd/yy',
        'beforeShow' : function(input, inst) {
            var bodyRect= document.body.getBoundingClientRect();
            var rect= input.getBoundingClientRect();
            positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}');
        }
    }).datepicker('setDate', new Date());
});

Grundsätzlich füge ich vor jedem "show" -Ereignis von datepicker ein neues style-Tag am Kopf an (das vorherige löschen, falls vorhanden). Bei dieser Methode werden die meisten Probleme, auf die ich während der Entwicklung gestoßen bin, umgangen.

Getestet auf Chrome, Firefox, Safari und IE> 8 (da IE8 mit jsFiddle nicht gut funktioniert und ich meine Begeisterung verliere, wenn ich mich um .__ kümmere.

Ich weiß, dass dies eine Mischung aus jQuery- und Javascript-Kontexten ist, aber an dieser Stelle möchte ich einfach nicht die Mühe machen, sie in jQuery umzuwandeln. Wäre einfach, ich weiß. Ich bin jetzt mit dieser Sache fertig. Hoffe, dass jemand anderes von dieser Lösung profitieren kann.

1
Programmer Dan

Beachten Sie auch, dass Ihre jQuery-UI-Komponenten und andere Elemente falsch positioniert werden, wenn IE in den Quirks-Modus wechselt.

Stellen Sie sicher, dass Sie Ihren Doctype korrekt auf den neuesten HTML5-Code eingestellt haben, um sicherzustellen, dass Sie nicht in den Quirks-Modus wechseln.

<!DOCTYPE html>

Die Verwendung von Übergangsfunktionen macht ein Durcheinander. Hoffentlich spart dies jemanden in der Zukunft.

0
Halfstop
$('.PDatePicker').MdPersianDateTimePicker({
                Placement: 'top',          
            });
0
hamed hossani

Oder Sie können das Fokusereignis für Ihr dateSelect-Objekt verwenden und die API gemeinsam positionieren. Sie können oben und unten und links nach rechts oder in die Mitte wechseln (oder wirklich alles, was Sie von der Position api wollen). Auf diese Weise benötigen Sie kein Intervall oder eine wahnsinnig komplexe Lösung und Sie können das Layout entsprechend Ihren Anforderungen konfigurieren, je nachdem, wo die Eingabe erfolgt.

dateSelect.focus(function () {
    $("#ui-datepicker-div").position({
        my: "left top",
        at: "left bottom",
        of: $(this)
    });
});
0
Taugenichts

Dadurch wird die Funktionalität in eine Methode namens "Funktion" überführt, die es Ihrem Code ermöglicht, sie einzukapseln oder für die Methode eine Jquery-Erweiterung zu erstellen. Nur für meinen Code verwendet, funktioniert perfekt

var nOffsetTop  = /* whatever value, set from wherever */;
var nOffsetLeft = /* whatever value, set from wherever */;

$(input).datepicker
(
   beforeShow : function(oInput, oInst) 
   { 
      AlterPostion(oInput, oInst, nOffsetTop, nOffsetLeft); 
   }
);

/* can be converted to extension, or whatever*/
var AlterPosition = function(oInput, oItst, nOffsetTop, nOffsetLeft)
{
   var divContainer = oInst.dpDiv;
   var oElem        = $(this);
       oInput       = $(oInput);

   setTimeout(function() 
   { 
      divContainer.css
      ({ 
         top  : (nOffsetTop >= 0 ? "+=" + nOffsetTop : "-=" + (nOffsetTop * -1)), 
         left : (nOffsetTop >= 0 ? "+=" + nOffsetLeft : "-=" + (nOffsetLeft * -1))
      }); 
   }, 10);
}
0
Brett Weber

Aktualisieren Sie in Jquery.UI einfach die _checkOffset-Funktion, so dass viewHeight zu offset.top hinzugefügt wird, bevor offset zurückgegeben wird. 

_checkOffset: function(inst, offset, isFixed) {
    var dpWidth = inst.dpDiv.outerWidth(),
    dpHeight = inst.dpDiv.outerHeight(),
    inputWidth = inst.input ? inst.input.outerWidth() : 0,
    inputHeight = inst.input ? inst.input.outerHeight() : 0,
    viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft()),
            viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop));
        offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0);
        offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0;
        offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0;

        // now check if datepicker is showing outside window viewport - move to a better place if so.
        offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
            Math.abs(offset.left + dpWidth - viewWidth) : 0);
        offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
            Math.abs(dpHeight + inputHeight) : 0);
**offset.top = offset.top + viewHeight;**
        return offset;
    },
0
David Moore
.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}
0
James