2013-02-28 27 views

Odpowiedz

29

Pewnie, że tak. Jak zawsze tylko jeden datepicker aktywny, można wybrać aktywną datepicker z:

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

i zmienić jego położenie:

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

EDIT

Whoah, podchwytliwe. Jeśli ustawisz górną lub lewą pozycję w beforeShow, zostanie ona ponownie zmieniona przez wtyczkę datepicker. Musisz umieścić zmiany css w setTimeout:

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

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

Wyjaśnienie o setTimeout(function() {}, 0): Why is setTimeout(fn, 0) sometimes useful?

+0

muszę ustawić go na inicjalizacji – Kin

+0

będę aktualizować moją odpowiedź. – iappwebdev

+1

dziękuję, ale zrobiłem na mojej drodze, ponieważ nie ma dobrego rozwiązania: '\t jQuery.extend (jQuery.datepicker, {_ checkOffset: function (inst, offset, isFixed) {offset.top = offset.top - 402; offset. left = offset.left - 240; return offset;}}); ' – Kin

2

Jeśli masz naprawdę zatrzymany można edytować jQuery ui- [wersja]. custom.js. Funkcja, która steruje położeniem, w którym kalander pojawi jest:

_findPos: funkcję (obj) { pozycji var 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(); 
    return [position.left, position.top]; 
}, 

Mam niestandardowy kod, który używa transformacji CSS3 do powiększania lub pomniejszania strony na podstawie jej szerokości. Spowoduje to wyświetlenie współrzędnych ekranu, na których opiera się widżet kalendarza. Dodałem niestandardowy kod do _findPos, aby wykryć i obsłużyć poziom powiększenia. Zmodyfikowany kod wygląda następująco:

_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]; 
}, 
1

może być stare pytanie, ale wpadł sam problem tylko dzisiaj i nie mógł dostać inne propozycje do pracy. Naprawiono to alternatywnie (używając .click(function(){}) i chciałem dodać moje dwa centy.

Mam pole wejściowe o identyfikatorze sDate, które po kliknięciu wyświetla datepicker.

Co zrobiłem, aby rozwiązać problem, to dodać procedurę kliknięcia do pola #sDate.

$('#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}); 
});