将 jquery datepicker 位置设置为文本字段的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15658009/
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
Set jquery datepicker position to top of text field
提问by Dinuka Thilanga
Jquery datepicker shows at under the test field. Some time it will top of text field. But I want show the datepicker always in top of the test field. How to do it?
Jquery datepicker 显示在测试字段下。有时它将位于文本字段的顶部。但我想始终在测试字段的顶部显示日期选择器。怎么做？
回答by Kamran
The following code will position the calendar always on top of input field.
以下代码将日历始终放置在输入字段的顶部。
$('.txtDate').datepicker({
beforeShow: function (textbox, instance) {
var txtBoxOffset = $(this).offset();
var top = txtBoxOffset.top;
var left = txtBoxOffset.left;
var textBoxWidth = $(this).outerWidth();
console.log('top: ' + top + 'left: ' + left);
setTimeout(function () {
instance.dpDiv.css({
top: top-190, //you can adjust this value accordingly
left: left + textBoxWidth//show at the end of textBox
});
}, 0);
}});
回答by Vassilis
Use at your own risk...
使用风险自负...
.ui-datepicker {
position: relative !important;
top: -290px !important;
left: 0 !important;
}
You may need to update top px as it depends on your base font size.
您可能需要更新 top px，因为它取决于您的基本字体大小。
回答by oneNiceFriend
$('#txtDate').datepicker({
beforeShow: function (textbox, instance) {
instance.dpDiv.css({
marginTop: (-textbox.offsetHeight) + 'px',
marginLeft: textbox.offsetWidth + 'px'
});
}
});
If you have two or more datepickers in one page, this code changes the position of all of them. If you need to change each one separately, you should use this code...
如果一页中有两个或多个日期选择器，此代码会更改所有日期选择器的位置。如果您需要单独更改每一项，则应使用此代码...
beforeShow: function (input, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: 100,
left: 200
});
}, 0);
}
回答by Tomsoft
I attempted to workaround this using this hack, based on the original jQuery UI's "_checkOffset" function:
我尝试使用这个 hack 来解决这个问题，基于原始 jQuery UI 的“_checkOffset”函数：
function datepickerInitDirectionReverse() {
// Store original method to be able to call it inside our overriding method.
$.datepicker._checkOffset_original = $.datepicker._checkOffset;
$.datepicker._checkOffset = function(inst, offset, isFixed) {
var dpHeight = inst.dpDiv.outerHeight(),
inputHeight = inst.input ? inst.input.outerHeight() : 0,
viewTop = isFixed ? 0 : $(document).scrollTop();
offset = $.datepicker._checkOffset_original(inst, offset, isFixed);
// Try to reposition the datepicker on top of it,
// only if the option flag is set by the user
// and only if this has not already happened.
offset.top -= Math.min(
offset.top,
(
this._get(inst, "directionReverse")
&&
(offset.top > inst.input.offset().top)
&&
(offset.top - viewTop > dpHeight)
) ? Math.abs(dpHeight + inputHeight) : 0
);
return offset;
}
}
Now you could configure your positioning preference as follows on a per element base:
现在，您可以在每个元素的基础上按如下方式配置您的定位首选项：
// Prefer datepicker to appear on top of input element (if room).
$(element).datepicker({
directionReverse: true
});
// Prefer datepicker to appear on bottom of input element (if room).
// This is the unchanged default behaviour.
$(element).datepicker({
directionReverse: false
});
Beware that the above might break in future versions of jQuery UI, if the developers decide to change the interfaces. Also please let me know if there be would any side effects.
请注意，如果开发人员决定更改界面，上述内容可能会在 jQuery UI 的未来版本中中断。另外请让我知道是否会有任何副作用。
回答by Andy
$('#StartDateIssued,#EndDateIssued,#StartDateFulFill,#EndDateFulFill').datepicker({
beforeShow: function (input, inst) {
var offset = $(input).offset();
var height = $(input).height();
window.setTimeout(function () {
inst.dpDiv.css({ top: (offset.top + height - 20) + 'px', marginLeft: ( input.offsetWidth) + 'px' })
})},
changeMonth: true, changeYear: true, constrainInput: true,
dateFormat: "dd-mm-yy", onSelect: function (dateText, inst) {
$('#StartDateIssued').valid();
$('#StartDateIssued').val(dateText);
}
});
回答by Joan Caron
You can try this :
$('#txtDate').datepicker({
beforeShow: function (textbox, instance) {
instance.dpDiv.css({
marginTop: (-textbox.offsetHeight) + 'px',
marginLeft: textbox.offsetWidth + 'px'
});
}
});
回答by bosari
jquery datepicker is designed like it doesn't need any changes...only it can be moved left or right by making changes in the css of the datepicker... check your html version because datepicker doesn't support html version 5.. html version 4 is supported
jquery datepicker 的设计就像它不需要任何更改...只能通过更改 datepicker 的 css 来向左或向右移动它...检查您的 html 版本，因为 datepicker 不支持 html 版本 5..支持 html 版本 4
