заставить указатель даты jQuery UI открываться в определенном направлении? - PullRequest
Новая
       10

заставить указатель даты jQuery UI открываться в определенном направлении?

15 голосов
/ 06 октября 2009

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

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

Ответы [ 6 ]

19 голосов
/ 01 декабря 2009

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

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

в более поздних версиях JQuery UI try: 

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

Это просто уничтожает функцию _checkOffset внутри DatePicker, что делает его коротким. Затем вы можете использовать .ui-datepicker css, чтобы убедиться, что он остается фиксированным, если это то, что вам нужно. Больше информации на как управлять позиционированием jqueryui-datepicker .

10 голосов
/ 30 октября 2009

Проблема в том, что элемент в позиции: исправлен показ верхней позиции 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>
6 голосов
/ 27 октября 2009

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

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;

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

3 голосов
/ 02 августа 2011

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

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

1 голос
/ 06 мая 2012

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

Это то, что я сделал. Это по общему признанию 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);
}
0 голосов
/ 29 октября 2009

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

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

...