Я использую элемент управления datepicker jQuery UI на position: fixed панели инструментов внизу моей страницы. Иногда на случайных компьютерах указатель даты появляется под панелью инструментов, что означает, что он находится за пределами страницы и его невозможно просмотреть или взаимодействовать с ним.
Есть ли способ заставить положение элемента управления datepicker всегда быть выше и правее его <input>?
Вы можете изменить строки:
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;
Однако это теряет гибкость. Если ваш ввод находится в верхней части страницы, у вас возникнет проблема, противоположная предыдущей.
Единственный способ быть уверенным (для jQueryUI-версии datepicker) - это отключить функцию datepicker, которая пытается отобразить внутри области просмотра. Вот способ сделать это без изменения файлов исходного кода:
$.extend(window.DP_jQuery.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
в более поздних версиях JQuery UI попробуйте:
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
Это просто сбивает с толку функцию _checkOffset внутри datepicker, что делает его быстрым. Затем вы можете использовать CSS-файл .ui-datepicker, чтобы убедиться, что он остается исправленным, если это то, что вам нужно. Дополнительная информация на how-to-control-positioning-of-jqueryui-datepicker .
Проблема в том, что элемент в позиции: фиксировано показывает верхнюю позицию 0 пикселей (проверьте с помощью: 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>
http://www.mindfiresolutions.com/Make-jQuery-datepicker-to-popup-in-different-positions-995.php
Проверь это. Я использовал это и смог разместить элемент управления datepicker во всех браузерах.
У меня была аналогичная проблема. У меня есть страница с элементами выбора даты, которые потенциально могут использоваться в различных местах на странице, а также с фиксированным заголовком, где пользователь может прокручивать страницу как по горизонтали, так и по вертикали, при этом фиксированный заголовок остается на месте. В заголовке также есть указатель даты. Поэтому я не могу глобально изменить datepicker.
Вот что я сделал. По общему признанию, это клудж, но он работает, поэтому я подумал, что это может помочь кому-то другому. Надеюсь, в будущем 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);
}
Из документации похоже, что вы могли бы использовать метод 'dialog' плагина datepicker для достижения желаемого результата. Однако использование этого, скорее всего, означает, что вам придется реализовать часть клея, которую вы в противном случае получили бы из коробки с помощью datepicker, например, обработчик обратного вызова для извлечения даты и т. Д.
Я попытался смоделировать какой-то код, чтобы увидеть его в действии, и, за исключением отображения окна выбора даты, я не мог заставить его работать. В любом случае, я хотел указать вам на это, если вам повезет больше, чем мне.
