Home/ Questions/Q 7900017
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:51:34+00:00

Here’s the code that is generated by default <div id=ui-datepicker-div class=ui-datepicker ui-widget ui-widget-content ui-helper-

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0