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-datepicker div置于屏幕中心的中心代码是什么？

编辑：这里是网站：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
    }
});

Answer 3

您可以使用datepicker的beforeShow属性来设置回调，您可以在其中编写代码以将日期选择器置于页面中心。试试这个

$(selector).datepicker({ 
    beforeShow: function(picker, inst) { 
        //Code to show the datepicker in the center.
    } 
});

Answer 4

编辑：

您可以尝试将内联日期选择器固定在屏幕中央，具体如下：

#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%);
}

然后在打开时显示它并将其隐藏在关闭/选择上。

我试图找到一个已经为我做这个的插件，我找到了这个：基于Bootstrap Date Picker的https://codecanyon.net/item/date-picker-in-fullscreen-jquery-plugin/20224980，可能值得查看

Answer 5

使用CSS：

#ui-datepicker-div {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

将顶部和左侧边距调整为高度和宽度的一半。确保这个CSS在jQuery UI CSS之前。

Answer 6

我知道桌子现在有点像“不 - 不”，但我发现它为我排序了问题：

<table>
    <tr>
        <td style="width:40%">
        </td>
        <td>
            <div id="myDatePicker">
            </div>
        </td>
        <td style="width:40%">
        </td>
    </tr>
</table>

Answer 7

老线程但谷歌仍然很高。这就是我回答的原因。

在你的datepicker js文件中找到它。

inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
    "static" : (isFixed ? "fixed" : "absolute")), display: "none",
    left: offset.left + "px", top: offset.top + "px"});

并改为：

inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
    "static" : (isFixed ? "fixed" : "absolute")), display: "none",
    left: "50%", top: "25%", transform: "translateX(-50%)"});

然后，您将使屏幕中心位于屏幕中心的25％。

Answer 8

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

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

8 个答案: