Question

以下是默认生成的代码

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

问题在于触发器输入旁边显示了日期选择器，而不是我想要的中心。

您可以在此处查看演示网站：http://enniakiosk.spin-demo.com/travelers.php

有谁知道如何使用JavaScript集中.ui-datepicker类？显然CSS不起作用。

Answer 1

通过CSS可以快速而肮脏地完成您想要的任务。您可以直接覆盖jquery UI样式，也可以将一些样式添加到自己的样式表中。这依赖于使用“！important”，但它有效并且您没有深入挖掘UI代码。

以下是您可以添加到自己的样式表中的内容。你需要达到你正在生成的日期选择器的大小。这是我只使用generic demo的大小。

#ui-datepicker-div {
position: absolute !important;
left: 50% !important;
top: 50% !important;
margin-left: -96px; /* approx half the height of the datepicker div - adjust based on your size */
margin-top: -73px; /* half the height of the datepicker div - adjust based on your size */
}

在CSS中使用“！important”是一个应该避免的拐杖，但只是展示了它是如何完成的......

Answer 2

如果您使用.dialog方法，则会接受参数pos，该参数是您希望对话框出现的[x, y]坐标数组（顶部/左侧）

此解决方案要求您计算顶部和左侧值，以使对话框在页面上居中。这取决于框的大小和视口的大小，您可以通过$(window).height()和$(window).width()来确定。你必须动态生成它。

在屏幕中央显示jQuery的Datepicker

2 个答案: