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

Question

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

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

Answer 1

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

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

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

Answer 2

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

$('.date').datepicker({ 
    beforeShow: function(input, inst) { 
     var widget = $(inst).datepicker('widget'); 
     widget.css('margin-left', $(input).outerWidth() - widget.outerWidth()); 
    } 
}); 

Answer 3

Решение Alex было приятным, но это не сработало, если вы попытались изменить размер окна. Проблема заключалась в том, что 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; 
    }, 

Answer 4

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

$('.datepicker').datepicker({ 
    beforeShow:function(input, inst) 
    { 
     var dp = $(inst.dpDiv); 
     var offset = $(input).outerWidth(false) - dp.outerWidth(false); 
     dp.css('margin-left', offset); 
    } 
}); 

Answer 5

Вы можете выровняйте jQuery UI date-picker с правой стороны, соответствующий поле ввода.

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

Пожалуйста Проверьте Запуск Demo

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' 
     }); 
     } 
     }); 
    }); 

Answer 6

options.widgetPositioning={ 
       horizontal:'right' 
       ,vertical: 'auto' 
      }; 

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

Answer 7

Это был дан ответ здесь: https://stackoverflow.com/a/28113070/6173628

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

//datepicker 
$('dob').on('click',function(){ 
    $('.datepicker').datepicker({ 
     "format": "dd/mm/yyyy", 
     "autoclose": true, 
     "orientation": right 
    }); 
});