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

Haben Sie eine Idee, wie Sie den DatePicker am Ende des zugehörigen Textfelds anstatt direkt darunter anzeigen können? In der Regel befindet sich das Textfeld am unteren Rand der Seite, und der DatePicker wird nach oben verschoben, um dies zu berücksichtigen, und deckt das Textfeld vollständig ab. Wenn der Benutzer das Datum eingeben möchte, anstatt es auszuwählen, kann er dies nicht. Ich möchte es lieber direkt hinter dem Textfeld anzeigen lassen, damit es keine Rolle spielt, wie es vertikal angepasst wird.

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

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

Folgendes verwende ich:

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

Möglicherweise möchten Sie dem linken Rand auch etwas mehr hinzufügen, damit er nicht direkt im Eingabefeld angezeigt wird.

Ich mache es direkt im CSS:

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

Meine Datumseingabefelder sind alle 100 Pixel breit. Ich habe auch den Z-Index hinzugefügt, damit der Kalender auch über AJAX-Popups angezeigt wird.

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

Hier ist meine Variante der Ausrichtung des Datepicker-Kalenders.

Ich finde es ziemlich schön, weil Sie die Positionierung über jQuery UI Position util steuern können.

Eine Einschränkung: jquery.ui.position.js 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);
    }
})

Hier ist eine weitere Variante, die für mich gut funktioniert: Passen Sie das Rect.top + 40 und das Rect.left + 0 an Ihre Bedürfnisse an:

$(".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>

Das funktioniert bei mir:

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

Zuerst denke ich, dass es eine afterShowingMethode im Datepicker-Objekt geben sollte, mit der Sie die Position ändern können, nachdem jquery alle Voodoos in der _showDatepickerMethode ausgeführt hat. Darüber hinaus preferedPositionwäre auch ein aufgerufener Parameter wünschenswert, sodass Sie ihn festlegen und abfragen können, falls der Dialog außerhalb des Ansichtsfensters gerendert wird.

Es gibt einen "Trick", um dieses letzte Ding zu machen. Wenn Sie die _showDatepickerMethode studieren , werden Sie die Verwendung einer privaten Variablen sehen $.datepikcer._pos. Diese Variable wird eingerichtet, wenn sie noch niemand eingerichtet hat. Wenn Sie diese Variable ändern, bevor das Dialogfeld angezeigt wird, übernimmt Jquery sie und versucht, das Dialogfeld an dieser Position zuzuweisen. Wenn es außerhalb des Bildschirms gerendert wird, wird es angepasst, um sicherzustellen, dass es sichtbar ist. Hört sich gut an, oder?

Das Problem ist; _posist privat, aber wenn dir das nichts ausmacht. 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
    }
});

Achten Sie jedoch auf Jquery-ui-Updates, da eine Änderung in der internen Implementierung von _showDatepickermöglicherweise Ihren Code beschädigt .

Ich musste den Datepicker gemäß einem übergeordneten Div positionieren, in dem sich meine randlose Eingabesteuerung befand. Dazu habe ich das Dienstprogramm "position" verwendet, das im Kern der jquery-Benutzeroberfläche enthalten ist. Ich habe das im beforeShow-Event gemacht. Wie andere oben kommentiert haben, können Sie die Position nicht direkt in beforeShow festlegen, da der Datepicker-Code den Speicherort nach Abschluss der beforeShow-Funktion zurücksetzt. Um dies zu umgehen, legen Sie die Position einfach mit setInterval fest. Das aktuelle Skript wird abgeschlossen und zeigt den Datepicker an. Anschließend wird der Neupositionierungscode sofort ausgeführt, nachdem der Datepicker sichtbar ist. Obwohl es niemals passieren sollte, wenn der Datums-Picker nach 0,5 Sekunden nicht sichtbar ist, hat der Code eine Ausfallsicherheit, um das Intervall aufzugeben und zu löschen.

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

Binden Sie den Fokus, nachdem Sie Datepicker verwendet haben. Ändern Sie die CSS des Widgets von Datepicker

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

Ich habe es mit meinem benutzerdefinierten JQuery-Code behoben.

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

2. Finden Sie die aktuelle Position von oben und

3. positionierte das Popup-Feld, dessen Klassenname " .ui-datepicker " ist.

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, Sie können mit Ihrem ändern.

Fix Show Position Problem daterangepicker.jQuery.js

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

Eine sehr einfache Abfragefunktion.

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

Ich habe lächerlich viel Zeit damit verbracht, dieses Problem für mehrere Seiten einer neuen Site herauszufinden, die ich entwickle, und nichts schien zu funktionieren (einschließlich einer der verschiedenen oben vorgestellten Lösungen, die ich implementiert habe. Ich vermute, jQuery hat sich gerade geändert Ich weiß nicht, ob die Lösungen nicht mehr funktionieren. Ehrlich gesagt verstehe ich nicht, warum in der jQuery-Benutzeroberfläche nicht einfach etwas implementiert ist, um dies so zu konfigurieren, wie es scheint Ein ziemlich großes Problem, bei dem der Kalender immer an einer Position weit unten auf der Seite von der Eingabe auftaucht, an die er angehängt ist.

Jedenfalls wollte ich eine Endlösung, die generisch genug war, dass ich sie überall verwenden konnte und sie funktionieren würde. Ich scheine endlich zu einem Schluss gekommen zu sein, der 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());
});

Im Wesentlichen füge ich vor jedem Datepicker-Show-Ereignis ein neues Style-Tag am Kopf hinzu (lösche das vorherige, falls vorhanden). Diese Methode umgeht die meisten Probleme, auf die ich während der Entwicklung gestoßen bin.

Getestet auf Chrome, Firefox, Safari und IE> 8 (da IE8 mit jsFiddle nicht gut funktioniert und ich meine Begeisterung für das Sorgen verliere

Ich weiß, dass dies eine Mischung aus jQuery- und Javascript-Kontexten ist, aber an dieser Stelle möchte ich mich einfach nicht darum bemühen, es in jQuery zu konvertieren. Wäre einfach, ich weiß. Ich bin gerade so fertig mit diesem Ding. Hoffe, jemand anderes kann von dieser Lösung profitieren.

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

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

Ich habe es genommen von (( So steuern Sie die Positionierung des jQueryUI-Datepickers ))

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

Es klappt !!!

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

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

Es ist auch erwähnenswert, dass Ihre jQuery-UI-Komponenten und andere Elemente falsch positioniert werden, wenn der IE in den Quirks-Modus fällt.

Um sicherzustellen, dass Sie nicht in den Mackenmodus geraten, stellen Sie sicher, dass Sie Ihren Doctype korrekt auf den neuesten HTML5-Code eingestellt haben.

<!DOCTYPE html>

Die Verwendung von Transitional bringt die Dinge durcheinander. Hoffentlich spart dies jemandem in Zukunft etwas Zeit.

Dadurch wird die Funktionalität in eine Methode mit dem Namen function eingefügt, sodass Ihr Code sie kapseln oder die Methode zu einer jquery-Erweiterung machen kann. 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);
}

Aktualisieren Sie in Jquery.UI einfach die Funktion _checkOffset, sodass 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;
    },

.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}

$('.PDatePicker').MdPersianDateTimePicker({
                Placement: 'top',          
            });