CODEWITHSUNDEEP
jquerydatepicker
Neil
Neil

Reputation: 2902

jQuery Date picker not moving with page scroll

I am using the standard jQuery UI datepicker ,However when i scroll the page the date picker remains fixed . Any ideas how to solve this ?

http://jsfiddle.net/jbK6a/3/

Regards, Neil

Upvotes: 14

Views: 42348

Answers (6)

Dinesh Vedpathak
Dinesh Vedpathak

Reputation: 21

Use daterangepicker plugin and we have to add new option parentEl

 <div class="container">
        <h2>Modal Example</h2>
        <!-- Button to Open the Modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            Open modal
        </button>

        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <input type="text" name="dates" value="01/01/2018 - 01/15/2018" />
                       

                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <script>
        $(function() {
            $('input[name="dates"]').daterangepicker({
                parentEl: $('#myModal'),
                showDropdowns: true,
            });

        });
    </script>

Upvotes: 2

parnas
parnas

Reputation: 21

Just remove height: 100% rule from html selector. That's solves problem.

Upvotes: 1

SNYDERHAUS
SNYDERHAUS

Reputation: 451

Couldn't find any answers on this using Bootstrap and datepicker that was having an issue with the datepicker staying attached to the element when scrolling on a modal. This was my solution: 

 var dateModals = (function() {
    'use strict';

    var currentInput = '';

    var setPos = function() {
        if (currentInput === '') return false;
        var $datepicker = $('.datepicker');
        var topPos = currentInput.offset().top + currentInput.outerHeight();
        if ($datepicker.hasClass('datepicker-orient-bottom')) {
            topPos -= $datepicker.outerHeight() + currentInput.parent('.date').outerHeight();
        }
        $datepicker.css('top', topPos);
    };

    var attachEvents = () => {
        $('.modal').on('scroll', function() {
            setPos();
        });

        $('.modal').on('click', '.date input.form-control', function() {
            currentInput = $(this);
        });
    };

    var initialize = (function() {
        attachEvents();
    })();

})();

If following Bootstrap & Datepicker syntax, this should play nicely.

Upvotes: 0

Spartanicus
Spartanicus

Reputation: 76

To solve this problem in jQuery UI 1.11.4 I added a .bind() event to the end of the datepicker instantiation: 

$("*selector*").datepicker({
  *settings*
}).bind('click',function () {
  $("#ui-datepicker-div").appendTo("*other-selector*");
});

In my case, the "other-selector" was $(this).closest('the-date-input-parent'). This picks up the single #ui-datepicker-div box (which jQuery UI places at the end of the DOM) and moves it to a location somewhere else within the document. This can be done for multiple datepickers on the same page.

The other-selector should have position: relative; set so that the absolutely positioned #ui-datepicker-div becomes positioned relative to the new parent. Once so, it scrolls just fine.

This solution was the easiest fix to this problem (though it took a lot of time and searching to come to this conclusion) and allowed the datepicker to work correctly on mobile devices and tablets where it would otherwise be unusable.

Upvotes: 3

Jamey
Jamey

Reputation: 843

With a little fiddling I managed to get the following:

http://jsfiddle.net/jbK6a/12/

Using this, the datepicker hides itself on page scroll. I believe there are jQuery methods to ascertain the scroll position and so with a bit more fiddling, you could then manually manipulate the datepicker and update its position based on this value...

UPDATE: Just fiddled a bit and got: http://jsfiddle.net/jbK6a/18/ which scrolls the datepicker, but it's really messy, any number of things can break it especially other collapsible elements. Fortunately Sem has a far better and cleaner solution :)

(Thought I'd add my code anyway though)

Upvotes: 6

Sem
Sem

Reputation: 4649

The problem is that the datepicker is outside the div with overflow: scroll;. If the datepicker was generated inside the container this wouldn't be a problem.

Solution: http://jsfiddle.net/jbK6a/15/

I placed the datepicker behind the input with the beforeShow event.

And I used position: relative; on the scrollable container so that de absolute element listens to the container.

Upvotes: 13

Related Questions