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

Question

Я использую jQuery UI's datepicker control в панели инструментов position: fixed в нижней части моей страницы. Иногда на случайных компьютерах под панелью инструментов появляется дампикер, а это означает, что она отключена от страницы и невозможно просмотреть или взаимодействовать.

Есть ли способ заставить позиционирование управления datepicker всегда быть выше и справа от его <input>?

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

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

Answer 2

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

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

Answer 3

Проблема в том, что элемент в положении: фиксированное положение верхней позиции 0px (отметьте: 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> 

Answer 4

Единственный способ быть уверенным (для версии 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, что делает его беличьей. Затем вы можете использовать cui .ui-datepicker css, чтобы убедиться, что он остается фиксированным, если это то, что вам нужно. Дополнительная информация: how-to-control-positioning-of-jqueryui-datepicker.

Answer 5

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

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

Answer 6

У меня была аналогичная проблема. У меня есть страница с сборщиками даты, которые можно использовать в разных местах на странице, но также и в фиксированном заголовке, где пользователь может прокручивать страницу как горизонтально, так и вертикально, при этом фиксированный заголовок остается на месте. Заголовок также имеет датупик. Поэтому я не могу сделать глобальное изменение 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); 
}