如何让jQuery-UI datepicker出现在我的屏幕中央？

Question

现在,datepicker的位置是通过javascript通过jQuery-UI框架添加的内联css确定的.我希望将日期选择器放在屏幕中央,而不是根据触发器的位置进行定位.

如何用我自己的东西覆盖jQuery生成的这个定位？我甚至有一个jQuery脚本将div放在屏幕中央,但由于脚本被jquery-ui覆盖,它仍然无法正常工作.

这是生成的内联代码:

<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; ">

这是一个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;
}

由以下人员召集: $('.ui-datepicker').center();

使用此功能将.ui-datepickerdiv置于屏幕中心的代码是什么？

编辑:这是网站:http://univiaje.spin-demo.com/

• 单击侧栏中红色背景下方的其中一个链接,应打开一个窗口
• 单击日历图标
• 失败:(

Answer 1

HTML,CSS解决方案

HTML:

<div id="datepicker-container">
  <div id="datepicker-center">
    <div id="datepicker"></div>
  </div>
</div>

CSS:

#datepicker-container{
  text-align:center;
}
#datepicker-center{
  display:inline-block;
  margin:0 auto;
}

Answer 2

您可以传入一个beforeShow回调，在其中执行类似的操作$(this).css(...)。请参阅此处：http ://jqueryui.com/demos/datepicker/#event-beforeShow

编辑：

如果你想使用你的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
    }
});