Sticky issue on bootstrap datepicker

bootstrap-datetimepicker z-index
bootstrap datepicker position issue
download bootstrap-datepicker
bootstrap datepicker beforeshowday
bootstrap datepicker style
bootstrap datepicker initialize
bootstrap 4 datepicker
bootstrap datepicker clear button

I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad and Iphone (not tested on andriod devices yet), when I scroll down and try to touch the datepicker to open it , it scrolls back to the top of the page, how can I fix this issue?

Similar problem arises when I am using a custom dropdown Selectric

I have created a simple striped down version of the problem here. Note that the problem wont replicate on emulator but on an actual mobile device or ipad.

I also faced same issue and resolved it as below solution , you can try it. datepicker has beforeShow property where you have to set calendar position.

  $("#EffectiveDateAccept").datepicker({
        changeMonth: true,
        changeYear: true,
        // minDate: 0,
        dateFormat: 'mm/dd/yy',
        beforeShow: function (input, inst) {
            var calendar = inst.dpDiv;
            setTimeout(function () {
                calendar.position({
                    my: 'center bottom',
                    at: 'top',
                    collision: 'none',
                    of: input
                });
            }, 1);
        }
    });

css: Sticky issue on bootstrap datepicker, I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on  daysofweekhighlighted appears to not work on bootstrap-datepicker using bootstrap 4 #2529 opened Jan 22, 2020 by osieman1 Enable dates out of range

Try this

.dropdown-menu{
position: fixed!important
}

Datetimepicker coming behind div with position fixed · Issue #1863 , Trying the classic datepicker of jquery instead the problem is not there. All the parent divs have relative position but the widget seems close into  What I have identified is that the div.sticky-placeholder node which appears below the div.sticky node is not part of the DOM on page-load and is only inserted when I begin scrolling. As soon as I scroll back to the top the node is again removed.

This issue is found unrelated to specific environment (not iOS only) and has a solution as follows:

You should find out which datepicker div class sets datepicker actually from hidden to visible (which of them change upon successful show and hide event).

Add to your css for that class (here modal-open) the missing show command:

body.modal-open {
    overflow: visible;
}

Now the scroll should stay in place.

Example refers to html like:

<body>
      <div class="modal-open">
            Datepicker
      </div>
</body>

Source:

Bootstrap modal: background jumps to top on toggle

PS. My source has also 18 other options, if this seems too hacky.

I have made this current one once, worked like charm and was not so tricky to do.

The datepicker's position should be relative to the input field · Issue , problem with the bootstrap datepicker close to the left edge of the the calendar window will not scroll, position is fixed, and if the input is on  I too faced the same issue while using bootstrap datepicker in my project. I used an alternate method where in i created a hidden transparent layer inside the datepicker template inside bootstrap-datepicker.js (with classname 'hidden-layer-datepicker') and gave fixed position and occupying full height and width of the html.

just add This CSS code to your site it will fix that issue.

.element{
position: sticky!important;
}

Sticky issue on bootstrap datepicker - css - html, I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad​  BETA Live video webcastThis page is not working with the sticky feature. As far as the docs are concerned it should work.

If you view it in Inspect Element, it's creating a separate DIV in HTML which has position absolute. Just change that position to sticky. That's why that happens. See in the image.

You can do this by adding this line of CSS code:

.dropdown-menu {
  position: sticky;
}

Hope that will help you

Sticky issue on bootstrap datepicker - css, I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad​  The datepicker itself is returning the correct format, it's just a validation issue it seems. See my update for my current datepicker code. – user4344677 Aug 12 '15 at 7:45 The last thing I can think of: look at your editor template, in the textbox value you seem to override the display format that you set in the model.

Bootstrap datepicker issues on small screen, I want to the datepicker position to be fixed always on every screen size. 2) On small screen if the datepicker is the last control it gets cut off at the  +1. Without 'orientation', the datepicker is placed above the input field, with the arrow on top of it (thus at the wrong side). With 'orientation: "bottom"', the picker is positioned below the field, with the arrow at the bottom. Using the bootstrap CSS, the arrow is positioned correctly, but it is upside down.

Options, hasn't focus. This could be an issue if used as component or if opened by show method. Allows for fixed placement of the picker popup. “orientation” refers  Data API ¶. As with bootstrap’s own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript. For most datepickers, simply set data-provide="datepicker" on the element you want to initialize, and it will be intialized lazily, in true bootstrap fashion.

[Solved] Problem with bootstrap datetimepicker, Since there was problem with jQuery version requirement for both FullCalendar and Datetimepicker. Full Calendar -> jQuery 1.7.2 Expected behaviour datepicker is defined on jQuery elements Actual behaviour datepicker is no longer defined on jQuery elements after jQuery is upgraded to 3.4.1 Datepicker version used 1.8.0 Example code Jsfiddle example to reproduce th

Comments
  • Its probably because your datepicker-parent has style position: fixed. I think you should be able to work without it.
  • But I want it to be sticky to top.
  • Can you please explain your problem? I checked with ipad but, didn't understand your issue.
  • @UmeRonaldo you are using an old version of the bootstrap datepicker. open its JavaScript file, it was created in 2012, try using the latest version from their github.
  • the link seems to be broken?
  • There is no class attached to body when the datepicker opens, it works by appending a set of html at the end of body and no style changes to body, .
  • Tried it now , but problem not solved, I have tried it on the parent datepicker-parent too. both new tests are uploaded with the name test2.html and test3.html
  • let me check it
  • are you want to set it at the top? if you want it then you need to add JavaScript when you scroll then you add these css to date picker div let me know if you can't do it
  • @Baum mit Augen - Thanks, I have tried to improve my answer. Please let me know if more needs to be done.