如何让 jQuery-UI 日期选择器显示在我的屏幕中央？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8842425/
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 do I make jQuery-UI datepicker show up in the center of my screen?
提问by imjp
Right now the datepicker's position is determined via inline css that is being added by javascript via the jQuery-UI framework. I'd love to have the datepicker in the center of the screen instead of being located based on where my trigger is.
现在日期选择器的位置是通过 javascript 通过 jQuery-UI 框架添加的内联 css 确定的。我希望日期选择器位于屏幕中央，而不是基于触发器所在的位置。
How do I override this positioning being generated by jQuery with something of my own? I even have a jQuery script to center a div in the center of a screen but it's still not working due to the script being overwritten by jquery-ui's.
如何用我自己的东西覆盖由 jQuery 生成的这个定位？我什至有一个 jQuery 脚本可以将 div 居中在屏幕中央，但由于脚本被 jquery-ui 覆盖，它仍然无法正常工作。
Here's the inline code generated:
这是生成的内联代码：
<div id="ui-datepicker-div" class="ui-datepicker
ui-widget ui-widget-content ui-helper- clearfix ui-corner-all
ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em;
position: absolute; left: 349px; top: 453px; z-index: 1; display: block; ">
Here is a jQuery function to center a div on the screen:
这是一个 jQuery 函数，用于在屏幕上居中 div：
//center div on screen
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
Which is called by by: $('.ui-datepicker').center();
由以下人员调用： $('.ui-datepicker').center();
What would be the code to use this function to center the .ui-datepickerdiv on the center of the screen?
使用此函数将.ui-datepickerdiv 居中于屏幕中心的代码是什么？
EDIT:here's the website: http://univiaje.spin-demo.com/
编辑：这里是网站：http: //univiaje.spin-demo.com/
- click on one of the links below the red background in the sidebar, a window should open
- click on the calendar icon
- fail :(
- 单击侧栏中红色背景下方的链接之一，应打开一个窗口
- 单击日历图标
- 失败 ：（
回答by intothenexo
HTML, CSS solution
HTML、CSS 解决方案
HTML:
HTML：
<div id="datepicker-container">
<div id="datepicker-center">
<div id="datepicker"></div>
</div>
</div>
CSS:
CSS：
#datepicker-container{
text-align:center;
}
#datepicker-center{
display:inline-block;
margin:0 auto;
}
回答by Magnus
EDIT:
编辑：
You can try to position fixed the inline datepicker in the center of the screen, with the following:
您可以尝试将固定的内联日期选择器定位在屏幕中央，如下所示：
#ui-datepicker-div{
position: fixed;
top: 50%;
left: 50%;
z-index: 9999;
-webkit-transform : translateX(-50%) translateY(-50%);
-moz-transform : translateX(-50%) translateY(-50%);
-ms-transform : translateX(-50%) translateY(-50%);
transform : translateX(-50%) translateY(-50%);
}
then show it on open and hide it on close/selection.
然后在打开时显示它并在关闭/选择时隐藏它。
I tried to find a plugin that already do this for me, and I found this one: https://codecanyon.net/item/date-picker-in-fullscreen-jquery-plugin/20224980which is based on Bootstrap Date Picker, may be worth to check it out
我试图找到一个已经为我做这个的插件，我找到了这个：https: //codecanyon.net/item/date-picker-in-fullscreen-jquery-plugin/20224980，它基于 Bootstrap 日期选择器，可能值得一试
回答by glortho
You can pass in a beforeShowcallback in which you do something like $(this).css(...). See here: http://jqueryui.com/demos/datepicker/#event-beforeShow
您可以传入一个beforeShow回调，在其中执行类似$(this).css(...). 在这里看到：http: //jqueryui.com/demos/datepicker/#event-beforeShow
EDIT:
编辑：
If you want to use your centerfunction, just do this (note I was targeting the wrong element before):
如果您想使用您的center功能，只需执行以下操作（注意我之前针对的是错误的元素）：
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
$(selector).datepicker({
beforeShow: function(input, inst) {
// $(inst).center() // not sure if this works
$('.ui-datepicker').center() // this should work
}
});
回答by ShankarSangoli
You can use datepicker's beforeShowproperty to set the callback where you can write your code to center the datepicker on the page. Try this
您可以使用 datepicker 的beforeShow属性来设置回调，您可以在其中编写代码以将日期选择器置于页面的中心。尝试这个
$(selector).datepicker({
beforeShow: function(picker, inst) {
//Code to show the datepicker in the center.
}
});
回答by ATLChris
Use CSS:
使用 CSS：
#ui-datepicker-div {
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
Adjust the top and left margins byy half the height and width. Make sure this CSS is before the jQuery UI CSS.
将顶部和左边距调整为高度和宽度的一半。确保此 CSS 位于 jQuery UI CSS 之前。
回答by Nick Wright
I know tables are a bit of a "no-no" these days, but i found it sorted the problem for me:
我知道这些天表格有点“禁忌”，但我发现它为我解决了问题：
<table>
<tr>
<td style="width:40%">
</td>
<td>
<div id="myDatePicker">
</div>
</td>
<td style="width:40%">
</td>
</tr>
</table>
回答by kris Lec
Magnus's solution works fine for me only if adjusted with !important:
Magnus 的解决方案只适用于我调整!important：
#ui-datepicker-div{
position: fixed !important;
top: 50% !important;
left: 50% !important;
z-index: 9999 !important;
-webkit-transform : translateX(-50%) translateY(-50%) !important;
-moz-transform : translateX(-50%) translateY(-50%) !important;
-ms-transform : translateX(-50%) translateY(-50%) !important;
transform : translateX(-50%) translateY(-50%) !important;
}
回答by PatrikJarl
Old thread but still high on Google. That's why I answer.
旧线程，但在谷歌上仍然很高。这就是我回答的原因。
Find this in your datepicker js file.
在您的 datepicker js 文件中找到它。
inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
"static" : (isFixed ? "fixed" : "absolute")), display: "none",
left: offset.left + "px", top: offset.top + "px"});
And change it with:
并更改它：
inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
"static" : (isFixed ? "fixed" : "absolute")), display: "none",
left: "50%", top: "25%", transform: "translateX(-50%)"});
Then you'll have the box centered on the screen 25% from the top.
然后，您将在屏幕中央距顶部 25% 的位置放置该框。
