Как выровнять Datepicker по правому краю текстового поля? - PullRequest
Новая
       40

Как выровнять Datepicker по правому краю текстового поля?

15 голосов
/ 17 июня 2010

У меня есть JQuery UI Datepicker в правом верхнем углу моего макета.
По умолчанию он открывается выровненным по левому краю своего текстового поля.
Таким образом, выпадет макет:

Date Picker

Как сделать его открытым, выровненным по правой границе его текстового поля?

Ответы [ 9 ]

17 голосов
/ 05 декабря 2011

Мне понадобилось время, чтобы понять это. 

$('.date').datepicker({
    beforeShow: function(input, inst) {
        var widget = $(inst).datepicker('widget');
        widget.css('margin-left', $(input).outerWidth() - widget.outerWidth());
    }
});
3 голосов
/ 25 сентября 2013

Я знаю, что это старый вопрос ... но все еще не нативное решение ... вот обновленный кусок кода: 

$('.datepicker').datepicker({
    beforeShow:function( input, inst )
    {
        var dp = $(inst.dpDiv);
        var offset = $(input).outerWidth(false) - dp.outerWidth(false);
        dp.css('margin-left', offset);
    }
});
1 голос
/ 18 октября 2017

Здесь ответили: https://stackoverflow.com/a/28113070/6173628

Опция ориентации - вот что работает: 

//datepicker
$('dob').on('click',function(){
    $('.datepicker').datepicker({
        "format": "dd/mm/yyyy",
         "autoclose": true,
         "orientation": right
    });
});
1 голос
/ 24 декабря 2012

Решение Алекса было хорошим, но оно не сработало, если вы попытались изменить размер окна вниз. Проблема заключалась в том, что jquery ui пытается вычислить положение виджета, чтобы он никогда не выходил из поля зрения. Дело в том, что это не очень хорошо с решением Алекса. Я изменил исходный код (что не очень приятно, но единственное решение, которое я придумал) для достижения результата. Вот функция в строке 3960, которую я изменил: 

/* Check positioning to remain on screen. */
    _checkOffset: function(inst, offset, isFixed) {
        // CHANGED This way I can add class date-right to the input to make it right aligned
        var isRightAlign = inst.input.hasClass('date-right');

        var dpWidth = inst.dpDiv.outerWidth();
        var dpHeight = inst.dpDiv.outerHeight();
        var inputWidth = inst.input ? inst.input.outerWidth() : 0;
        var inputHeight = inst.input ? inst.input.outerHeight() : 0;
        var viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft());
        var viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : $(document).scrollTop());

        // CHANGED Alex's solution is implemented on the next line (just add || isRightAlign)
        offset.left -= (this._get(inst, 'isRTL') || isRightAlign ? (dpWidth - inputWidth) : 0);
        offset.left -= (isFixed && offset.left == inst.input.offset().left) ? $(document).scrollLeft() : 0;
        offset.top -= (isFixed && offset.top == (inst.input.offset().top + inputHeight)) ? $(document).scrollTop() : 0;

        // CHANGED Do not check if datepicker is outside of the viewport if it's right aligned
        if(!isRightAlign){
            // now check if datepicker is showing outside window viewport - move to a better place if so.
            offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
                Math.abs(offset.left + dpWidth - viewWidth) : 0);
        }

        offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
            Math.abs(dpHeight + inputHeight) : 0);

        return offset;
    },
0 голосов
/ 11 декабря 2018

Улучшение ответа Алекса Баркера, когда окно достаточно мало, чтобы сместить виджет. 

$('.date').datepicker({
    beforeShow: function(input, inst) {
        var widget = $(instance).datepicker('widget');
        var marginLeft = $(input).outerWidth() - widget.outerWidth();
        if ($(input).offset().left + $(widget).outerWidth() > $(window).width()) {
                    marginLeft += ($(input).offset().left + $(widget).outerWidth()) - $(window).width();
        }
        marginLeft = marginLeft > 0 ? 0: marginLeft;
        widget.css('margin-left', marginLeft);
   }
});
0 голосов
/ 12 апреля 2018

Все просто. Вы можете сделать это таким образом. Ключ использует margin-left, а не левое значение. Этот код работает и для адаптивного. Это означает, что если в левой части текстового поля недостаточно места, чем будет отрисовано слева: 0, а не справа: 0 текстового поля. 

$(".date").datepicker({
         dateFormat: "yy-mm-dd",
         changeYear: true,
         minDate:0,
         yearRange: "+0:+2",
         beforeShow: function (textbox, instance) {
            marginLeftDatepicker=  $(instance.dpDiv).outerWidth() - 
         $(textbox).outerWidth()
            datePickerWidth = $(instance.dpDiv).outerWidth();
              var datepickerOffset = $(textbox).offset();
              if(datepickerOffset.left > datePickerWidth){ // this condition 
            will allign right 0 according to textbox
                  instance.dpDiv.css({
                 marginLeft: -marginLeftDatepicker + 'px'
                });
              } else { // for resize if you resize and dont have enough 
             space to align from righ so keep it allign left
                instance.dpDiv.css({
                 marginLeft: 0
                });
              }
            }
    });

Это наиболее подходящий выход из множества доступных.

0 голосов
/ 25 февраля 2016 
options.widgetPositioning={
                horizontal:'right'
                ,vertical: 'auto'
            };

ср.https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning

0 голосов
/ 20 апреля 2015

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

[Здесь -176 - это ширина моего элемента выбора даты, который вы можете изменить в соответствии со своими потребностями.]

Пожалуйста, проверьте демо-версию

http://jsfiddle.net/VijayDhanvai/m795n3zx/

http://jsfiddle.net/m795n3zx/

$(document).ready(function () {
        $('#txtDateFrom,#txtDateTo').datepicker({
        changeYear: true,
        beforeShow: function (textbox, instance) {   
        instance.dpDiv.css({
            marginLeft: textbox.offsetWidth+ (-176) + 'px'
        });
        }
        });
    });
0 голосов
/ 13 января 2011

Проще говоря, вы можете установить опцию rtl (арабский путь) в jQuery. Найдите isRTL, затем измените значение с false на true. (isRTL: true)

Если вам нужно выровнять только всплывающее окно целиком, тогда просто установите опцию rtl и удалите Атрибут направления в пользовательском CSS. Например: .ui-datepicker-rtl {}

Но это не будет стрелками для навигации по месяцам. Если вам также нужна эта функциональность, то вам нужно сделать больше работы. Вы должны отредактировать основную функциональность, связанную с rtl (поиск isrtl и соответственно изменить значения) и изменить css, связанный с rtl

...