jQuery 如何将 Datepicker 与文本框右边缘对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3060563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align Datepicker to text box right edge?
提问by Micha? P?ka?a
I have jQuery UI Datepicker on the top right edge of my layout.
By default, it opens aligned to the left edge of its text box.
Thus, it falls out of the layout:
我在布局的右上角有 jQuery UI Datepicker。
默认情况下，它打开时与其文本框的左边缘对齐。
因此，它脱离了布局：
How to make it open aligned to the right border of its text box?
如何使它打开与文本框的右边框对齐？
回答by Alex Barker
It took me a while to figure this out.
我花了一段时间才弄清楚这一点。
$('.date').datepicker({
beforeShow: function(input, inst) {
var widget = $(inst).datepicker('widget');
widget.css('margin-left', $(input).outerWidth() - widget.outerWidth());
}
});
回答by Bradley
I know it's an old question... but still not native solution... here's an updated piece of code:
我知道这是一个老问题......但仍然不是本机解决方案......这是一段更新的代码：
$('.datepicker').datepicker({
beforeShow:function( input, inst )
{
var dp = $(inst.dpDiv);
var offset = $(input).outerWidth(false) - dp.outerWidth(false);
dp.css('margin-left', offset);
}
});
回答by ?an Kusterle
Alex's solution was nice, but it didn't work well if you tried to resize window down. The problem was that jquery ui is trying to calculate position of widget, so that it never gets out of view. The thing is it doesn't work well with Alex's solution. I changed source code (which is not very nice, but only solution I came up with) to achieve the result. Here's the function on line 3960 that I changed:
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'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;
},
回答by Vijay Dhanvai
You can align jQuery UI date-picker from right side corresponding to input field.
您可以从对应于输入字段的右侧对齐 jQuery UI 日期选择器。
[Here -176 is the width of my datepicker div, you can change according to your need.]
[这里-176是我的datepicker div的宽度，你可以根据需要更改。]
Please Check Running Demo
请检查运行演示
http://jsfiddle.net/VijayDhanvai/m795n3zx/
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'
});
}
});
});
回答by Zachary Vorwaller
This has been answered here: https://stackoverflow.com/a/28113070/6173628
这已在此处回答：https: //stackoverflow.com/a/28113070/6173628
The orientation option is what works:
方向选项是有效的：
//datepicker
$('dob').on('click',function(){
$('.datepicker').datepicker({
"format": "dd/mm/yyyy",
"autoclose": true,
"orientation": right
});
});
回答by Mustkeem K
It's simple. You can do it by this way. The key is using margin-left rather changing left value. This code is working for responsive too. It means if there is not enough space in left side of textbox than it will render from left:0 rather than right:0 of textbox.
这很简单。你可以通过这种方式做到这一点。关键是使用 margin-left 而不是改变左值。此代码也适用于响应式。这意味着如果文本框左侧没有足够的空间，它将从文本框的 left:0 而不是 right: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
});
}
}
});
This is most suitable way out of many available.
这是许多可用方法中最合适的方法。
回答by Stacker
Improving Alex Barker's answer when window is small enough to shift the widget.
当窗口小到可以移动小部件时，改进 Alex Barker 的回答。
$('.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);
}
});
回答by Herve
options.widgetPositioning={
horizontal:'right'
,vertical: 'auto'
};
cf. https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning
参见 https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning
回答by zap - CG
Simply, you can set the rtl(Arabin way) option in the jQuery. Search for isRTL, then change the value from false to true. ( isRTL:true )
简单地说，您可以在 jQuery 中设置 rtl(Arabin way) 选项。搜索 isRTL，然后将值从 false 更改为 true。( isRTL:true )
If you only need to align whole popup box, well, then simply set rtl option and remove the direction attribute in the custom css. Eg: .ui-datepicker-rtl { }
如果您只需要对齐整个弹出框，那么只需设置 rtl 选项并删除自定义 css 中的方向属性。例如：.ui-datepicker-rtl { }
But, this will not set to arrows to navigate through months. If you need that functionality as well, then you have to do more work. You have to edit the core functionality related to rtl(search for isrtl and change values accordingly) & changing the css related to rtl.
但是，这不会设置为箭头来浏览几个月。如果您也需要该功能，那么您必须做更多的工作。您必须编辑与 rtl 相关的核心功能（搜索 isrtl 并相应地更改值）并更改与 rtl 相关的 css。
