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