У меня есть jQuery UI Datepicker в верхнем правом краю моего макета.
По умолчанию он открывается в соответствии с левым краем его текстового поля.
Таким образом, он выпадает из макета:
Как сделать его открытым в соответствии с правой границей его текстового поля?
Мне потребовалось некоторое время, чтобы понять это.
$('.date').datepicker({
beforeShow: function(input, inst) {
var widget = $(inst).datepicker('widget');
widget.css('margin-left', $(input).outerWidth() - widget.outerWidth());
}
});
Я знаю, это старый вопрос... но все же не собственное решение... здесь обновленный фрагмент кода:
$('.datepicker').datepicker({
beforeShow:function( input, inst )
{
var dp = $(inst.dpDiv);
var offset = $(input).outerWidth(false) - dp.outerWidth(false);
dp.css('margin-left', offset);
}
});
Решение Alex было приятным, но это не сработало, если вы попытались изменить размер окна. Проблема заключалась в том, что jquery ui пытается вычислить положение виджета, чтобы он никогда не выходил из поля зрения. Дело в том, что это не очень хорошо работает с решением Alex. Я изменил исходный код (что не очень приятно, но только решение, которое я придумал) для достижения результата. Здесь функция на строке 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 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 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;
},
Здесь был дан ответ: fooobar.com/questions/339844/...
Опция ориентации - это то, что работает:
//datepicker
$('dob').on('click',function(){
$('.datepicker').datepicker({
"format": "dd/mm/yyyy",
"autoclose": true,
"orientation": right
});
});
Вы можете выровнять jQuery UI date-picker с правой стороны в соответствии с полем ввода.
[Здесь -176 - это ширина моего datepicker div, вы можете изменить в соответствии с вашими потребностями.]
Пожалуйста, проверьте Running Demo
http://jsfiddle.net/VijayDhanvai/m795n3zx/
$(document).ready(function () {
$('#txtDateFrom,#txtDateTo').datepicker({
changeYear: true,
beforeShow: function (textbox, instance) {
instance.dpDiv.css({
marginLeft: textbox.offsetWidth+ (-176) + 'px'
});
}
});
});
Это просто. Вы можете сделать это таким образом. Ключ использует 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
});
}
}
});
Это наиболее подходящий выход из множества доступных.
Улучшение ответа Алекса Баркера, когда окно достаточно маленькое, чтобы сдвинуть виджет.
$('.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);
}
});
options.widgetPositioning={
horizontal:'right'
,vertical: 'auto'
};
ср. https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning
Просто вы можете установить опцию rtl (Arabin way) в jQuery. Найдите isRTL, затем измените значение с false на true. (isRTL: true)
Если вам нужно всего лишь выровнять всплывающее окно, то просто установите параметр rtl и удалите атрибут направления в пользовательском css. Например:.ui-datepicker-rtl {}
Но это не будет означать стрелки, чтобы перемещаться через месяцы. Если вам нужна эта функциональность, тогда вам нужно сделать больше работы. Вам необходимо отредактировать основные функции, связанные с rtl (поиск по isrtl и соответствующим образом изменить значения) и изменение css, связанного с rtl.