Here's the code that is generated by default

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

The problem with this is that the datepicker is shown right next to the trigger input, instead of the center which is where i want it.

You can see the demo site here: .php

Does anyone know how to center the .ui-datepicker class using javascript? CSS Won't work, obviously.

Here's the code that is generated by default

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

The problem with this is that the datepicker is shown right next to the trigger input, instead of the center which is where i want it.

You can see the demo site here: http://enniakiosk.spin-demo./travelers.php

Does anyone know how to center the .ui-datepicker class using javascript? CSS Won't work, obviously.

• javascript
• jquery
• css

Share Improve this question Follow asked May 7, 2012 at 19:18 imjpimjp 6,7051111 gold badges4949 silver badges5858 bronze badges 3

• Center vertically or horizontally? – Sammy Commented May 7, 2012 at 19:52
• Both vertically and horizontally :) – imjp Commented May 7, 2012 at 19:58
• stackoverflow./questions/662220/… - it looks like people think that css will work. – Ben Barden Commented May 7, 2012 at 20:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you're using the .dialog method it accepts a parameter, pos which is an [x, y] array of coordinates (top/left) of where you would like the dialog to appear.

This solution requires that you calculate top and left values such that the dialog looks centered on the page. This depends on how big the box is and what size the viewport is, which you can determine by $(window).height() and $(window).width(). You'll have to generate this on the fly.

A quick and dirty way to acplish what you want could be done via CSS. You could either directly override the jquery UI style or add some to your own stylesheet. This relies on using "!important" but it works and you're not digging into the UI code.

Here's what you could add to your own stylesheet. You'll need to the size of the datepicker you're generating. Here's I'm just using the size of the 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 */
}

Using "!important" in CSS is a crutch that should be avoided, but just showing how it could be done...