Как управлять позиционированием jQueryUI datepicker - PullRequest
Новая
       24

Как управлять позиционированием jQueryUI datepicker

34 голосов
/ 30 ноября 2009

Средство выбора даты в jQueryUI отображается с динамической позицией. Он рендерится в соответствии со своим CSS, если для этого достаточно места, но если не хватает места в окне, он пытается отобразить на экране. Мне нужно, чтобы он всегда оставался на месте и отображался в одном и том же месте, независимо от положения экрана или других обстоятельств. Как это можно сделать с помощью инструмента выбора даты jQueryUI? Другие реализации jQuery datepicker, кажется, имеют способы сделать это, но я не вижу способа сделать это для версии пользовательского интерфейса.

Кажется, что ответ не просто изменяет CSS: 

.ui-datepicker { width: 17em; padding: .2em .2em 0; (trying top/margin-top/position:relative, etc. here...)}

... поскольку при создании указателя даты он динамически создает верхний и левый элементы в стиле элемента. Пока не нашли способ обойти это. Один из подходов, который я видел, - это дать что-то подобное в параметре beforeShow: 

beforeShow: function(input,inst){
                                inst.dpDiv.css({ 
                                   'top': input.offsetHeight+ 'px', 
                                   'left':(input.offsetWidth - input.width)+ 'px'
                                               });
                                }

Это имеет некоторый эффект, но свойства top и left по-прежнему динамически устанавливаются после того, как они запускаются при рендере DatePicker. Это все еще пытается сделать на экране. Как мне заставить его всегда рендериться в одном и том же месте? Мой следующий шаг, вероятно, состоит в том, чтобы пойти в кишки сборщика даты и начать вытаскивать вещи. Есть идеи?

Обратите внимание, что ответ (для версии пользовательского интерфейса) не в:

Ответы [ 13 ]

0 голосов
/ 17 августа 2018

Вот как у меня получилось: 

$( "input[name='birthdate']" ).datepicker({
    beforeShow : function(input,inst){
    window.setTimeout(function () {
        $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: input });
    }, 1);
    }
});

Чтобы установить его при изменении размера экрана: 

$(window).resize(function(){ $("#ui-datepicker-div").position({ my: "left top", at: "left bottom", of: "input[name='birthdate']" }); });
0 голосов
/ 25 июня 2015

По умолчанию календарь выбора даты отображался в верхнем правом углу моего поля ввода, поэтому верхняя часть его была скрыта моей строкой меню. Вот как я позиционировал виджет (jquery-ui версия 1.11.4) очень просто (обратите внимание, что 'ui-datepicker' - это имя класса, данное jquery-ui): 

$(document).ready(function() {
$(".ui-datepicker").css('margin-left', '-50px', 'margin-top', '-50px');
//... 
}
0 голосов
/ 10 февраля 2013

вот более простое решение 

var $picker = $( ".myspanclass" ).datepicker(); // span has display: inline-block
$picker.find('.ui-datepicker').css('margin-left', '-50px');
Страница:
...