Как изменить положение всплывающего окна элемента управления jQuery DatePicker

Question

Есть идеи, как заставить DatePicker появляться в конце соответствующего текстового поля, а не непосредственно под ним? Как правило, текстовое поле находится внизу страницы, а DatePicker перемещается вверх, чтобы учесть это, и полностью покрывает текстовое поле. Если пользователь хочет ввести дату, а не выбрать ее, он не может. Я бы предпочел, чтобы он появился сразу после текстового поля, поэтому не имеет значения, как он регулируется по вертикали.

Есть идеи, как управлять позиционированием? Я не видел никаких настроек для виджета, и мне не повезло с настройкой CSS, но я мог легко что-то упустить.

Answer 1

Вот что я использую:

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

Вы также можете добавить немного больше к левому полю, чтобы оно не совпадало с полем ввода.

Answer 2

Я делаю это прямо в CSS:

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

Все мои поля ввода даты имеют ширину 100px. Я также добавил z-index, чтобы календарь также отображался над всплывающими окнами AJAX.

Я не изменяю CSS-файл jquery-ui; Я перегружаю класс в своем основном CSS-файле, чтобы я мог изменить тему или обновить виджет, не вводя заново свои конкретные моды.

Answer 3

Вот мой вариант выравнивания календаря Datepicker.

Я думаю, что это очень хорошо, потому что вы можете управлять позиционированием с помощью утилиты Position UI Position из jQuery.

Одно ограничение: требуется jquery.ui.position.js.

Код:

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

Answer 4

Вот еще один вариант, который мне подходит, отрегулируйте rect.top + 40, rect.left + 0 в соответствии с вашими потребностями:

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

Answer 5

Принятый ответ на этот вопрос на самом деле не для jQuery UI Datepicker. Чтобы изменить положение DatePicker пользовательского интерфейса jQuery, просто измените .ui-datepicker в файле css. Таким же образом можно изменить размер DatePicker, просто отрегулируйте размер шрифта.

Answer 6

Это работает для меня:

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

Answer 7

Сначала я думаю, что в объекте datepicker должен быть метод afterShowing, где вы можете изменить позицию после того, как jquery выполнит все свои функции вуду в методе _showDatepicker. Кроме того, параметр с именем preferedPosition также был бы желателен, так что вы можете установить его и изменить его в jquery, если диалог отображается вне области просмотра.

Есть "хитрость", чтобы сделать это последнее. Если вы изучите метод _showDatepicker, вы увидите использование закрытой переменной $.datepikcer._pos. Эта переменная будет установлена, если никто не настроил ее раньше. Если вы измените эту переменную перед тем, как отобразить диалоговое окно, Jquery возьмет его и попытается разместить диалоговое окно в этой позиции, и, если оно будет отрисовано за пределами экрана, оно настроит его так, чтобы оно было видимым. Звучит хорошо, а?

Проблема есть; _pos конфиденциально, но если вы не против. Вы можете:

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

Но будьте осторожны с обновлениями Jquery-ui, потому что изменение внутренней реализации _showDatepicker может нарушить ваш код.

Answer 8

Мне нужно было расположить указатель даты в соответствии с родительским элементом div, в котором находился мой элемент управления вводом без полей. Для этого я использовал утилиту «position», включенную в ядро ​​пользовательского интерфейса jquery. Я сделал это в событии beforeShow. Как уже отмечали другие, вы не можете установить позицию непосредственно в beforeShow, так как код средства выбора даты сбрасывает местоположение после завершения функции beforeShow. Чтобы обойти это, просто установите позицию, используя setInterval. Текущий сценарий завершится, показывая средство выбора даты, а затем код перемещения будет запущен сразу после того, как средство выбора даты станет видимым. Хотя это никогда не должно происходить, если средство выбора даты не отображается через 0,5 секунды, код имеет отказоустойчивый механизм, позволяющий отказаться и очистить интервал.

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

Answer 9

bind focusin после использования DatePicker изменить CSS виджета DatePicker желаю помощи

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

Answer 10

я исправил это с помощью своего пользовательского кода jquery.

1. дал моему полю ввода указателя даты класс " .datepicker2 "

2. найти свою текущую позицию сверху и

3. позиционировал всплывающее окно с именем класса " .ui-datepicker "

вот мой код.

$('.datepicker2').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

здесь "40" - это мой ожидаемый пиксель, вы можете изменить его на свой.