Получение jQuery UI datepicker всегда открывается в определенном направлении?

Ответ 1

Вы можете изменить строки:

offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;

... читать:

offset.left = $(inst.input).position().left + dpWidth;
offset.top = $(inst.input).position().top - dpHeight;

Однако это теряет гибкость. Если ваш вход находится в верхней части страницы, перед вами возникнет противоположная проблема.

Ответ 2

Единственный способ быть уверенным (для версии jQueryUI datepicker) - отключить функциональность datepicker, которая пытается отобразить внутри области просмотра. Здесь можно сделать это без изменения файлов исходного кода:

$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

в более поздних версиях пользовательского интерфейса JQuery:

$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

Это просто уничтожает функцию _checkOffset внутри datepicker, которая делает ее безвозвратно. Затем вы можете использовать cui.ui-datepicker css, чтобы убедиться, что он остается фиксированным, если это то, что вам нужно. Дополнительная информация на how-to-control-positioning-of-jqueryui-datepicker.

Ответ 3

Проблема заключается в том, что элемент в позиции: fixed show top position 0px (check with: alert $('# datepicker2'). position()).

Решение:

$('#datepicker').datepicker( {beforeShow: function(input) {
    var x = 100; //add offset
    var y = 20; 
    field = $(input);
    left = field.position().left + x;
    bottom = y;
    setTimeout(function(){
        $('#ui-datepicker-div').css({'top':'', 'bottom':bottom + 'px', 'left': left + 'px'});      
    },1);                    
}}

Тестирование HTML:

<form style="position:fixed; bottom:0; width:100%" name="form1" method="post" action="">
  <label>
    <input style="left:300px; position:absolute; bottom:0" type="text" name="textfield" id="datepicker">
  </label>
</form>

Ответ 4

http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php

проверьте это. Я использовал это и смог расположить элемент управления datepicker во всех браузерах.

Ответ 5

У меня была аналогичная проблема. У меня есть страница с сборщиками даты, которые можно использовать в разных местах на странице, но также и в фиксированном заголовке, где пользователь может прокручивать страницу как горизонтально, так и вертикально, при этом фиксированный заголовок остается на месте. Заголовок также имеет датупик. Поэтому я не могу сделать глобальное изменение datepicker.

Это то, что я сделал. Это, по общему признанию, kluge, но он работает, поэтому я подумал, что это может помочь кому-то другому. Надеюсь, в будущем jquery datepicker добавит опцию позиции.

beforeShow: function(input, inst) {
    $("#ui-datepicker-div").css({ "visibility": "hidden", "display": "none" );

    window.setTimeout(function() { 
        var leftPosition = parseInt($(window).width() / 2);
        $("#ui-datepicker-div").css({ "position": "fixed", "top": 0, "left": leftPosition });
        $("#ui-datepicker-div").css({ "visibility": "visible", "display": "inherit" );
    }, 500);
}

Ответ 6

Из документации, похоже, вы можете использовать 'dialog' method плагина datepicker для достижения желаемого результата, Однако использование этого, скорее всего, означает, что вам придется реализовать некоторый клей, который в противном случае вы могли бы получить из коробки с дампикером, например обработчик обратного вызова, чтобы извлечь дату и т.д.

Я попытался высмеять некоторый код, чтобы увидеть его в действии и не получить отображение даты, но я не мог заставить его работать. Во всяком случае, я хотел указать вам на это, если вам повезет больше, чем я.