How to change the pop-up position of the jQuery DatePicker control

Question

Any idea how to get the DatePicker to appear at the end of the associated text box instead of directly below it  What tends to happen is that the text box is towards the bottom of the page and the DatePicker shifts up to account for it and totally covers the text box  If the user wants to type the date instead of pick it  they can t  I d rather have it appear just after the text box so it doesn t matter how it adjusts vertically   Any idea how to control the positioning  I didn t see any settings for the widget  and I haven t had any luck tweaking the CSS settings  but I could easily be missing something

User · Answer

I spent a ridiculous amount of time trying to figure this problem out for several pages of a new site I'm developing and nothing seemed to work (including any of the various solutions presented above that I implemented. I'm guessing jQuery has just changed things up enough since they were suggested that the solutions dont' work any longer. I don't know. Honestly, I don't understand why there isn't something simple implemented into the jQuery ui to configure this, as it seems to be a fairly large issue with the calendar always popping up at some position considerably far down the page from the input to which it is attached.

Anyhow, I wanted an end solution that was generic enough that I could use it anywhere and it would work. I seem to have finally come to a conclusion that avoids some of the more complicated and jQuery-code-specific answers above:

jsFiddle: http://jsfiddle.net/mu27tLen/

HTML:

<input type="text" class="datePicker" />

JS:

positionDatePicker= function(cssToAdd) {
    /* Remove previous positioner */
    var oldScript= document.getElementById('datePickerPosition');
    if(oldScript) oldScript.parentNode.removeChild(oldScript);
    /* Create new positioner */
    var newStyle= document.createElement("style");
    newStyle.type= 'text/css';
    newStyle.setAttribute('id', 'datePickerPostion');
    if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd;
    else newStyle.appendChild(document.createTextNode(cssToAdd));
    document.getElementsByTagName("head")[0].appendChild(newStyle);
}
jQuery(document).ready(function() {
    /* Initialize date picker elements */
    var dateInputs= jQuery('input.datePicker');
    dateInputs.datepicker();
    dateInputs.datepicker('option', {
        'dateFormat' : 'mm/dd/yy',
        'beforeShow' : function(input, inst) {
            var bodyRect= document.body.getBoundingClientRect();
            var rect= input.getBoundingClientRect();
            positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}');
        }
    }).datepicker('setDate', new Date());
});

Essentially I attach a new style tag to the head prior to every datepicker "show" event (deleting the previous one, if present). This method of doing things gets around a large majority of the issues that I ran into during development.

Tested on Chrome, Firefox, Safari, and IE>8 (as IE8 doesn't work well with jsFiddle and I'm losing my gusto for caring about

I know that this is a mix of jQuery and javascript contexts, but at this point I just don't want to put the effort into converting it to jQuery. Would be simple, I know. I'm so done with this thing right now. Hope someone else can benefit from this solution.

User · Answer

Here is my variation of Datepicker calendar aligning    I think that it s pretty nice  because you can control positioning via jQuery UI Position util   One restriction  jquery ui position js required   Code      input name date    datepicker       beforeShow  function input  inst               Handle calendar position before showing it             It s not supported by Datepicker itself  for now  so we need to use its internal variables          var calendar   inst dpDiv              Dirty hack  but we can t do anything without it  for now  in jQuery UI 1 8 20          setTimeout function                 calendar position                   my   right top                   at   right bottom                   collision   none                   of  input                            1

User · Answer

Here is another variation that works well for me  adjust the rect top   40  rect left   0 to suit your needs    x000D   x000D      datepicker   datepicker   x000D      changeMonth  true  x000D      changeYear  true  x000D      dateFormat   mm dd yy   x000D      beforeShow  function  input  inst    x000D          var rect   input getBoundingClientRect    x000D          setTimeout function      x000D           inst dpDiv css   top  rect top   40  left  rect left   0     x000D             0   x000D        x000D      x000D   lt link rel  stylesheet  href    code jquery com ui 1 11 2 themes smoothness jquery-ui css  gt  x000D   lt script src    code jquery com jquery-1 10 2 js  gt  lt  script gt  x000D   lt script src    code jquery com ui 1 11 2 jquery-ui js  gt  lt  script gt  x000D   lt form gt  x000D   lt input class  datepicker  name  date1  type  text  gt  x000D   lt input class  datepicker  name  date2  type  text  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Here s what I m using     input date   datepicker       beforeShow  function input  inst            inst dpDiv css               marginTop  -input offsetHeight    px                marginLeft  input offsetWidth    px                         You may also want to add a bit more to the left margin so it s not right up against the input field

User · Answer

Within Jquery UI  just update the  checkOffset function  so that viewHeight is added to offset top  before offset is returned      checkOffset  function inst  offset  isFixed        var dpWidth   inst dpDiv outerWidth        dpHeight   inst dpDiv outerHeight        inputWidth   inst input   inst input outerWidth     0      inputHeight   inst input   inst input outerHeight     0      viewWidth   document documentElement clientWidth    isFixed   0     document  scrollLeft                 viewHeight   document documentElement clientHeight    isFixed   0      document  scrollTop    document body scrollTop            offset left -   this  get inst   isRTL      dpWidth - inputWidth    0           offset left -   isFixed  amp  amp  offset left     inst input offset   left      document  scrollLeft     0          offset top -   isFixed  amp  amp  offset top      inst input offset   top   inputHeight        document  scrollTop    document body scrollTop    0              now check if datepicker is showing outside window viewport - move to a better place if so          offset left -  Math min offset left   offset left   dpWidth  gt  viewWidth  amp  amp  viewWidth  gt  dpWidth                Math abs offset left   dpWidth - viewWidth    0           offset top -  Math min offset top   offset top   dpHeight  gt  viewHeight  amp  amp  viewHeight  gt  dpHeight                Math abs dpHeight   inputHeight    0     offset top   offset top   viewHeight            return offset

User · Answer

I took it from   How to control positioning of jQueryUI datepicker     extend   datepicker          checkOffset  function inst  offset  isFixed             return offset              it works

User · Answer

PDatePicker   MdPersianDateTimePicker                   Placement   top

User · Answer

I do it directly in the CSS    ui-datepicker      margin-left  100px    z-index  1000      My date input fields are all 100px wide  I also added the z-index so the calendar also appears above AJAX popups   I don t modify the jquery-ui CSS file  I overload the class in my main CSS file  so I can change the theme or update the widget without having to re-enter my specific mods

User · Answer

fix show position problem daterangepicker jQuery js    Original Code   show  hide  or toggle rangepicker     function showRP             if  rp data  state       closed                 rp data  state    open                rp fadeIn 300               options onOpen                        Fixed   show  hide  or toggle rangepicker     function showRP             rp parent   css  left   rangeInput offset   left           rp parent   css  top   rangeInput offset   top   rangeInput outerHeight             if  rp data  state       closed                 rp data  state    open                rp fadeIn 300               options onOpen

User · Answer

i fixed it with my custom jquery code    gave my datepicker input field a class   datepicker2  find its current position from top and positioned the popup box  which class name is   ui-datepicker    here is my code       datepicker2   click function        var popup    this  offset        var popupTop   popup top - 40          ui-datepicker   css          top    popupTop                here  40  is my expected pixel  you may change with yours

User · Answer

bind focusin after using datepicker change css of datepicker s widget wish help     input date   datepicker       input date   focusin function           input date   datepicker  widget   css  left  - 127

User · Answer

A very simple jquery function       datepicker   focus function event                   var dim     this  offset                        ui-datepicker-div   offset                       top         dim top - 180                      left        dim left   150

User · Answer

It s also worth noting that if IE falls into quirks mode  your jQuery UI components  and other elements  will be positioned incorrectly   To make sure you don t fall into quirks mode  make sure you set your doctype correctly to the latest HTML5    lt  DOCTYPE html gt    Using transitional makes a mess of things  Hopefully this will save someone some time in the future

User · Answer

This puts the functionality into a method named function  allowing for your code to encapsulate it or for the method to be made a jquery extension  Just used on my code  works perfectly  var nOffsetTop       whatever value  set from wherever     var nOffsetLeft      whatever value  set from wherever        input  datepicker      beforeShow   function oInput  oInst               AlterPostion oInput  oInst  nOffsetTop  nOffsetLeft                can be converted to extension  or whatever   var AlterPosition   function oInput  oItst  nOffsetTop  nOffsetLeft       var divContainer   oInst dpDiv     var oElem            this          oInput           oInput       setTimeout function                divContainer css                    top     nOffsetTop  gt   0          nOffsetTop    -      nOffsetTop   -1              left    nOffsetTop  gt   0          nOffsetLeft    -      nOffsetLeft   -1                    10

User · Answer

ui-datepicker  -ms-transform  translate 100px 100px   -webkit-transform  translate 100px 100px   transform  translate 100px 100px

User · Answer

They changed the classname to ui-datepicker-trigger  So this works in jquery 1 11 x   ui-datepicker-trigger    margin-top 7px    margin-left  -30px    margin-bottom 0px    position absolute    z-index 1000

User · Answer

The accepted answer for this question is actually not for the jQuery UI Datepicker   To change the position of the jQuery UI Datepicker just modify  ui-datepicker in the css file   The size of the Datepicker can also be changed in this way  just adjust the font size

User · Answer

First I think there should be a afterShowing method in the datepicker object  where you could change the position after jquery has done all its voodoo in the  showDatepicker method  Additionally  a parameter called preferedPosition would be also desirable  so you could set it and jquery modify it in case the dialog is rendered outside the viewport   There s a  trick  to do this last thing  If you study the  showDatepicker method  you will see the use of a private variable   datepikcer  pos  That variable will be setup if nobody has set it up before  If you modify that variable before showing the dialog  Jquery will take it and will try to allocate the dialog in that position  and if it renders out of the screen  it will adjust it to make sure it is visible  Sounds good  eh   Problem is   pos is private  but if you don t mind that  You can      input date   datepicker       beforeShow  function input  inst                  datepicker  pos     datepicker  findPos input     this is the default position           datepicker  pos 0    whatever    left           datepicker  pos 1    whatever    top             But be careful of Jquery-ui updates  because a change in the internal implementation of the  showDatepicker might break your code

User · Answer

I needed to position the datepicker according to a parent div within which my borderless input control resided  To do it  I used the  position  utility included in jquery UI core  I did this in the beforeShow event  As others commented above  you can t set the position directly in beforeShow  as the datepicker code will reset the location after finishing the beforeShow function  To get around that  simply set the position using setInterval  The current script will complete  showing the datepicker  and then the repositioning code will run immediately after the datepicker is visible   Though it should never happen  if the datepicker isn t visible after  5 seconds  the code has a fail-safe to give up and clear the interval           beforeShow  function a  b                var cnt   0              var interval   setInterval function                     cnt                    if  b dpDiv is   visible                          var parent   b input closest  div                        b dpDiv position   my   left top   at   left bottom   of  parent                         clearInterval interval                     else if  cnt  gt  50                        clearInterval interval                                    10

User · Answer

This works for me  beforeShow  function input  inst        var  this     this       var cal   inst dpDiv      var top    this offset   top    this outerHeight        var left    this offset   left       setTimeout function             cal css                top   top               left   left                    10

User · Answer

Or you can use the focus event on your dateSelect object and position api together  You can swap top and bottom and left for right or center  or really anything you want from the position api   This way you don t need an interval or any insanely complex solution and you can configure the layout to suit your needs depending on where the input is   dateSelect focus function              ui-datepicker-div   position           my   left top           at   left bottom           of    this

[javascript] How to change the pop-up position of the jQuery DatePicker control

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-ui-datepicker