Displaying jQuery's Datepicker in the center of the screen

Question

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.com/travelers.php

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

http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control - it looks like people think that css *will* work. — Ben Barden, May 07 '12 at 20:22

score 3 · Answer 1 · answered May 07 '12 at 21:26

A quick and dirty way to accomplish 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...

**Automatic center version:** https://jsfiddle.net/RokoCB/m255y1Lh/ -that will make it **fixed** for mobile (which is the most common use-case I think) — Roko C. Buljan, Jan 23 '17 at 01:55

score 3 · Accepted Answer · edited Apr 16 '15 at 14:19

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.

Displaying jQuery's Datepicker in the center of the screen

2 Answers2