Wie ändere ich jquery ui datepicker position?

Question

Ist es möglich, top und left Positionen zu ändern (aktuelle Werte erhalten und sie ändern) von jQuery UI datepicker. Bitte beachten Sie, dass ich die Position ändern muss, nicht margin, wie es in anderen Beispielen ist.

Answer 1

Sicher es ist. Da es immer nur eine aktiv ist picker, können Sie aktiv picker wählen mit:

var $datepicker = $('#ui-datepicker-div'); 

und seine Position ändern:

$datepicker.css({ 
    top: 10, 
    left: 10 
}); 

EDIT

Whoah, knifflig. Wenn Sie die obere oder linke Position in beforeShow setzen, wird es vom datepicker-Plugin wieder überschrieben. Sie müssen CSS-Änderungen in einem setTimeout setzen:

$("#datepicker").datepicker({ 
    beforeShow: function (input, inst) { 
     setTimeout(function() { 
      inst.dpDiv.css({ 
       top: 100, 
       left: 200 
      }); 
     }, 0); 
    } 
}); 

DEMO: http://jsfiddle.net/BWfwf/4/

Erklärung über setTimeout(function() {}, 0): Why is setTimeout(fn, 0) sometimes useful?

Answer 2

Wenn Sie wirklich stecken können Sie Ihre jquery-UI- [Version] bearbeiten. custom.js. Die Funktion, die die Position steuert, wo der Kalander wird angezeigt ist:

_findPos: function (obj) { var Position, inst = this._getInst (OBJ), isRTL = this._get (inst "isRTL");

Ich habe benutzerdefinierten Code, der eine CSS3-Transformation verwendet, um die Seite basierend auf ihrer Breite zu vergrößern oder zu verkleinern. Dadurch werden die Bildschirmkoordinaten verworfen, auf die das Kalenderwidget angewiesen ist. Ich habe dem _findPos einen benutzerdefinierten Code hinzugefügt, um die Zoomstufe zu erkennen und zu verarbeiten. Modifizierter Code sieht so aus:

_findPos: function(obj) { 
    var position, 
     inst = this._getInst(obj), 
     isRTL = this._get(inst, "isRTL"); 

    while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) { 
     obj = obj[isRTL ? "previousSibling" : "nextSibling"]; 
    } 

    position = $(obj).offset(); 
    /* Custom Code for Zoom */ 
    var zoomLevel = 1; 
    var minW = 1024; 
    if ($(window).width() > minW) 
       { zoomLevel = $(window).width()/minW;} 
    return [position.left, position.top/zoomLevel]; 
}, 

Answer 3

Könnte eine alte Frage sein, aber rannte in das Problem selbst nur heute und konnte andere Vorschläge nicht zur Arbeit bekommen. Fixed es alternativ (mit .click(function(){}) und wollte meine zwei Cent hinzufügen.

Ich habe ein Eingabefeld mit der ID sDate, die, wenn sie angeklickt, die Datepicker zeigt.

Was ich tat, um das Problem zu lösen war ein Klick Routine zum #sDate Feld hinzuzufügen.

$('#sDate').click(function(){ //CHANGE sDate TO THE ID OF YOUR INPUT FIELD 
    var pTop = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR TOP POSITIONING 
    var pLeft = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR LEFT POSITIONING 
    $('#ui-datepicker-div').css({'left':pLeft, 'top':pTop}); 
});