The datepicker's position should be relative to the input field

[Nerian]

Hi Andrew,

The Datepicker is currently placed at the end of the body element and positioned with absolute measures.

This means that if the user scrolls the page while the datepicker is being show, the datapicker remains still, instead of flowing with the page.

I think we should place the datepicker next to the input field, and use relative measures to position it.

What do you think?

[Yohn]

:+1: I just encountered this problem as well.. If the input that triggers the datepicker is within a modal and near the bottom of the viewing point it gets cut off. Then if we try to scroll the modal the datepicker just stays there, leaving the bottom of the datepicker cut off.

[Saturate]

I agree on this one, I am having this problem and I need to fix it no matter what as I need it to work.

[Richtermeister]

Along the same lines, when an input is towards the edge of a browser, the picker should probably position itself to stay within the browser. Currently it sticks out, making it unusable for these use-cases.

[eternicode]

@Nerian, are you seeing this when the picker's input is in a modal, or in "normal" use? I'm testing it with a normal (not-in-modal) input, and it's scrolling with the page.

[Nerian]

@eternicode In modal.

Here is a demo: https://github.com/Nerian/bootstrap-datepicker-rails/tree/master/testapp

Open the modal and click on the input field. The datepicker will pop up. Now scroll the page. You will see that the datepicker doesn't scroll with the page – it just stays at the exact position where it was placed at the beginning.

[dbartolomei]

any solution? I'm having the same issue when placing the datepicker close to the left edge of the browser.. worst in mobile

[barmstrong]

:+1: Same issue - it seems like having it appear directly under the input (not the icon) would be a better UI choice.

[barmstrong]

Work around is that you can add the datepicker class on the input instead.

<div class="input-append date">
  <input class="datepicker" size="16" type="text" id="start_time" value="<%= Time.now.strftime("%m/%d/%Y") %>" data-date-format="mm/dd/yyyy" style="width: 77px;">
  <span class="add-on datepicker-icon"><i class="icon-calendar"></i></span>
</div>

Then you have to trigger the datepicker manually when someone clicks the icon/right part.

jQuery ->
  $(document).on 'click', '.datepicker-icon', ->
    $(this).siblings('.datepicker').datepicker('show')

[dbartolomei]

Today I try your solution but didn't work for me. My current solution was to detect the document width and if greater than 400px (mobile) add the pagination-centered class(bootstrap), else the date picker will float to the far left by default.

if($(document).width() > 400){
    $('.datepicker').addClass('pagination-centered')
}

looking forward for a better solution :/

[karolcwikla]

Add the line: $('.modal.fade.in').on('scroll', $.proxy(this.place, this));

after: $(window).on('resize', $.proxy(this.place, this));

in show() function in Datepicker.prototype line 95;

[natashawylie]

To get around this issue I just moved the button to the other side, works a treat!

<div class="input-group date" id="dateOfCorrespondence" data-date="${dateOfCorrespondence}" data-date-format="dd/mm/yyyy">
  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  <input type="text" class="form-control" value="${dateOfCorrespondence}"  readonly />
</div>

[mryellow]

sideBySide enabled, 100% form field, with button on the right.

Time is re-positioned over top of calendar and as it tries to show off the screen to the right.

[NPC]

Not an ideal solution, yet for mobile I introduced the following rules to datepicker.css, to make the datepicker open to full-screen. I will keep testing it to see if there are any issues.

@media (max-width: 767px) {
    /* Full-screen display */
    .datepicker.datepicker-dropdown {
        top: 0 !important;
        left: 0 !important;
        height: 100%;
        width: 100%;
        margin-top: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    /* Hide the arrow */
    .datepicker.datepicker-dropdown:before {
        display: none;
    }
}

[Venkatram92]

problem with the datepicker close to the left edge of the browser any solution for this.....?

[Venkatram92]

problem with the bootstrap datepicker close to the left edge of the browser it should adjust the position automatically..!

in this way please provide me any solution....

[acrobat]

@VenkatRamNDD can you verify if this is still an issue with the latest master? As #546 should this or a related issue!

[sandipauti]

IS this regards to jQuery UI datepicker??

[asanti82]

I found a solution for this, which worked in my case. I modified the js file in this section:

place: function(){
/*var offset = this.component ? this.component.offset() : this.element.offset();
   this.picker.css({
        top: offset.top + this.height,
        left: offset.left
   });*/

   var element = this.component ? this.component : this.element;
        element.after(this.picker);
 },

so basically removed the styling and just placed it after the component or element and it worked!

[Gstji]

It would be good if you can inherit the position from parent. .bootstrap-datetimepicker-widget { position: inherit; z-index:1 !important; }

[hebbet]

@Gstji "bootstrap-datetimepicker-widget" is not a class of that datepicker. i guess you are in the wrong repo

[CamaroMan]

hi guys - not sure if its relevant here, but im opening the datetimepicker in a bootstrap modal..

When i open the datetime picker to select a date (ON MOBILE), it zooms the page ever so slightly (chrome 4.4.2).. its super annoying because after that the page is zoomed and some content is clipped off making the mobile interface chopped off.. I might just try a zoom reset after clicking r some hack ~ possibly just redir the user to the same page after submitting - however cancel wd then leave the issue :(

i added this line to the header

but its not working..

any ideas?

I have this html of the picker from firebug:

..(bunch of generic code removed)..

Any ideas? should I style the class="xdsoft_datetimepicker xdsoft_noselect oo be more responsive, or select a smaller font size?

thanks!

[hebbet]

hi guys - not sure if its relevant here, but im opening the datetimepicker in a bootstrap modal..

you are in the wrong repository. that one is about datepicker and not datetime**picker**

[astrosteve101]

This still seems to be an issue years later. I'm using the jQuery dialog, and when I click on the calendar icon, the datepicker appears very far down the screen, or completely off the screen. One person said don't make the input type hidden, make it invisible with a style, I tried that, but it didn't change anything.

[HJGreen]

Make sure your body element isn't restricted in height.

The positioning system is dependant on the body being the same height as the content, not the viewport.

[paullimzw]

is this resolved?

[harveyprince]

far left from the right position

[hao9601]

Same Problem, have the daterangepicker inside uibModal (angular), the calendar window will not scroll, position is fixed, and if the input is on the bottom of the screen, it will go out of the screen!

[d3netxer]

I don't think this is resolved yet.

[arbado]

How about this:

// create <div class="datepicker dropdown-menu">...</div>
$('#input').datepicker();
// add a class <div class="datepicker dropdown-menu mypicker">...</div>
$('.datepicker').last().addClass('mypicker');
// position Datepicker on click
$('#input').on('click',function() {
	$('.datepicker.mypicker')
		.hide()
		.css('top',$('#input').offset().top+$('#input').outerHeight()+$(window).scrollTop())
		.show();
});

[XYue]

@asanti82 's solution works for me too!