顯示jQuery的日期選擇器在屏幕

這裏的中心是由默認生成的代碼顯示jQuery的日期選擇器在屏幕

<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不起作用。

來源

2012-05-07 imjp

垂直或水平居中嗎？ – Sammy

縱向和橫向:) – imjp

http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control - 它看起來像人們認爲css *將*工作。 –

如果你使用它接受一個參數的.dialog方法， pos這是一個[x, y]陣列的座標（上/左）您想要顯示對話框的位置。

此解決方案要求計算頂部和左側值，以使對話框看起來集中在頁面上。這取決於框的大小和視口的大小，您可以通過$(window).height()和$(window).width()確定。你將不得不即時產生這個。

來源

2012-05-08 01:59:42

一個快速和骯髒的方式來完成你想要的可以通過CSS來完成。您可以直接覆蓋jQuery UI樣式或將一些添加到您自己的樣式表中。這依賴於使用「！重要」，但它的工作原理，而不是挖掘到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是應該避免的，但只是顯示它如何可以做柺杖...

來源

2012-05-07 21:26:53 Voodoo

好東西的人。這工作！ – imjp

**自動中心版本：** https://jsfiddle.net/RokoCB/m255y1Lh/ - 這將使它**固定**移動（這是我認爲最常見的用例） –

顯示jQuery的日期選擇器在屏幕

回答

相關問題