Czy można zmienić pozycje top
i left
(pobierz bieżące wartości i zmień je) na jQuery UI datepicker. Należy pamiętać, że muszę zmienić pozycję, a nie ustawić margin
, tak jak w innych przykładach.Jak zmienić pozycję jquery ui datepicker?
Odpowiedz
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?
muszę ustawić go na inicjalizacji – Kin
będę aktualizować moją odpowiedź. – iappwebdev
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
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];
},
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});
});
- 1. Jak zmienić wartość indeksu JQuery UI Datepicker?
- 2. Formatowanie jquery UI datepicker
- 3. Jak zlokalizować jQuery UI Datepicker?
- 4. jQuery-UI Datepicker: Draggable?
- 5. jQuery UI "$ (" # datepicker ")
- 6. jquery-ui datepicker wielojęzyczna integracja
- 7. jquery ui datepicker Format daty
- 8. jQuery UI - Datepicker - Ukryj rok
- 9. Jquery ui Datepicker maxDate dynamicznie
- 10. jQuery UI Datepicker i datejs
- 11. Jak uzyskać dateFormat z datepicker jQuery UI?
- 12. Jak uruchomić jQuery UI DatePicker onclick?
- 13. JQuery UI Datepicker - Jak usunąć przycisk "Gotowe"
- 14. jQuery UI - Konwertuj jQuery UI Datepicker na czas UNIX
- 15. Datepicker w semantic ui
- 16. problem podczas klonowania jquery UI datepicker
- 17. Podświetl daty w jquery UI datepicker
- 18. Jak zmienić pozycję elementu za pomocą jQuery
- 19. jquery-ui datepicker zmiana z-index
- 20. Nie można zainstalować widżety jQuery UI Datepicker
- 21. jQuery UI Datepicker - Dlaczego drugi datepicker przestaje się świecić?
- 22. jQuery UI Datepicker - setDate nie działa
- 23. JQuery UI DatePicker - Czy obsługuje wiele dat?
- 24. klasa dla jQuery UI przycisk datepicker
- 25. jQuery UI DatePicker do wyświetlania tylko rok
- 26. Wyłącz przyszłe daty w jQuery UI Datepicker
- 27. Niestandardowa odpowiedź z JQuery UI DatePicker
- 28. jquery ui datepicker rozmiar czcionki jest ogromny
- 29. Datepicker Jquery UI. Wyłącz tablicę dat
- 30. Jak zmienić pozycję grid.draw
Możliwy duplikat http://stackoverflow.com/questions/14508389/jquery-datepicker-change-position-dynamically – starryknight64