How to create jQuery-UI datepicker in the center of the screen?

Question

Right now, the position of the datepicker is determined using the built-in css, which is added by javascript through the jQuery-UI framework. I would really like the date indicator to be in the center of the screen instead of being located depending on where my trigger is.

How to override this positioning created by jQuery with something mine? I even have a jQuery script to center the div in the center of the screen, but it still doesn't work due to the script being overwritten by jquery-ui's.

Inline code is generated here:

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

Here is the jQuery function to center the div on the screen:

//center div on screen
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

which is called: $('.ui-datepicker').center();

What will be the code to use this function to center the div .ui-datepickerin the center of the screen?

EDIT: : http://univiaje.spin-demo.com/

• ,
• fail: (

Answer 1

HTML, CSS

HTML:

<div id="datepicker-container">
  <div id="datepicker-center">
    <div id="datepicker"></div>
  </div>
</div>

CSS

#datepicker-container{
  text-align:center;
}
#datepicker-center{
  display:inline-block;
  margin:0 auto;
}

Answer 2

beforeShow, - $(this).css(...). . : http://jqueryui.com/demos/datepicker/#event-beforeShow

EDIT:

center, ( , ):

jQuery.fn.center = function () {
  this.css("position","absolute");
  this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
  this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
  return this;
}

$(selector).datepicker({
    beforeShow: function(input, inst) {
        // $(inst).center() // not sure if this works
        $('.ui-datepicker').center() // this should work
    }
});

Answer 3

datepicker beforeShow , , datepicker .

$(selector).datepicker({ 
    beforeShow: function(picker, inst) { 
        //Code to show the datepicker in the center.
    } 
});

Answer 4

CSS:

#ui-datepicker-div {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

. , CSS CSS jQuery UI.

Answer 5

, "-", , :

<table>
    <tr>
        <td style="width:40%">
        </td>
        <td>
            <div id="myDatePicker">
            </div>
        </td>
        <td style="width:40%">
        </td>
    </tr>
</table>

Answer 6

, - Google. .

datepicker js.

inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
    "static" : (isFixed ? "fixed" : "absolute")), display: "none",
    left: offset.left + "px", top: offset.top + "px"});

:

inst.dpDiv.css({position: ($.datepicker._inDialog && $.blockUI ?
    "static" : (isFixed ? "fixed" : "absolute")), display: "none",
    left: "50%", top: "25%", transform: "translateX(-50%)"}); 

25% .

Answer 7

EDIT:

:

#ui-datepicker-div{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;

    -webkit-transform   : translateX(-50%) translateY(-50%);
    -moz-transform      : translateX(-50%) translateY(-50%);
    -ms-transform       : translateX(-50%) translateY(-50%);
    transform           : translateX(-50%) translateY(-50%);
}

/.

I tried to find a plugin that already did this for me, and I found it: https://codecanyon.net/item/date-picker-in-fullscreen-jquery-plugin/20224980 , which is based on Bootstrap Date picker, maybe worth checking out.