Upgrade from 1.3.1.1 to 1.4.0+ shows datepicker at bottom of document

[ajbogh]

I know this is a very old version, but I'm trying to upgrade incrementally to the latest version. What I've found is that the 1.4.0 version somehow breaks how the datepicker attaches to the desired element.

In the image below you can see the footer of the webpage and the datepicker below that. In the DOM it's added right before the closing body tag.

How would I go about fixing this? Can you provide a basic example using a similar HTML structure (maybe not exact, but a container element with 2 input fields would be nice)?

Image of broken state:

What it should look like:

Code:

Gemfile

  gem 'bootstrap-datepicker-rails', '=1.4.0'

includes.scss (I noticed we're not using bootstrap-datepicker3 here)

@import "bootstrap-datepicker";

HTML (Slim template)

li.input-daterange.custom-date-range.datepicker [ ng-mousedown="dateRangeClick('', $event)" ng-class="{selected: searchParams.date_range == ''}"
      data-provide="datepicker" data-date-language="#{I18n.locale.to_s}" data-date-autoclose="true" ]
      span.range
        = t :range
      input.start-date type="text" class="input-small" ng-model="model.startDate" ng-change="submitDates()" ng-click="nullClick($event)" ng-model-options="{ updateOn: 'blur', debounce: 1000 }"
      span.to
        = t :date_picker_to
      input.end-date type="text" class="input-small" ng-change="submitDates()" ng-model="model.endDate" ng-click="nullClick($event)" ng-model-options="{ updateOn: 'blur', debounce: 1000 }"
      span.date-range-requirement = t :must_not_exceed_90_days
      span.arrow ng-click="dateRangeClick('', $event)"

Angular directive init

dateRangeElem = angular.element(element.find('.input-daterange'))
$datepicker = dateRangeElem.datepicker
    orientation: 'top left'

[Nerian]

Hi Allan,

There is a test application that you can take a look at:

https://github.com/Nerian/bootstrap-datepicker-rails/blob/master/testapp/app/views/home/index.html.erb

Are you using Bootstrap 2 or 3? Try with require bootstrap-datepicker3 if using 3.

Also, try the the latest version too.

[ajbogh]

Thanks @Nerian. I used the example you provided as a baseline, added the "datepicker" ID to a div, added "start" and "end" names to my elements, and made sure none of my CSS had anything to do with datepicker. The datepicker still wouldn't attach to the elements.

We don't explicitly list which version of Bootstrap we're using, we only have your gem in the Gemfile, and it must pull whichever version it requires. I added Bootstrap 3 as well and targeted Bootstrap3 in the SCSS file, but that didn't change anything.

I've tried the latest version as well with the same results. It seems like we're stuck with version 1.3.1 for the moment.

[Nerian]

I would suggest as a next step to check the page without any JS or CSS except the datepicker's.

[bradbajuz]

What's the status on this? I'm having a similar issue in Rails 5, Turbolinks 5 and Bootstrap 3. In my case, the datepicker moves to the far left of the screen. If I install 1.3.1, the problem goes away.

[IvRRimum]

Had it working before, now it the exact problem as the OP. I dont have bootstrap, i use foundation and import only /core from this datepicker.

Any ideas?

[IvRRimum]

I ended up downgrading to - 1.3.1.1 works like before :)

[ajbogh]

@bradbajuz Do you have "position: relative;" on the parent container? It looks like you're using a right float on a div that doesn't have "position: relative" on it and the calendar is attaching to the start of the first div with "position: relative" on it.

[bradbajuz]

No, the right float has been removed and still experience the same problem. Position is set to "absolute" and changing the position to "relative" doesn't fix the problem.

@ajbogh Update: Yes, adding "position: relative" to the body fixed the problem for me

[Josano]

Goodnight Nerian,

I am trying to load the locale pt_BR, I followed the steps but it continues in English :(

form.erb

            <div class="col-sm-6 col-md-6 row">
              <%= f.label :birth %>
              <%= f.text_field :birth , "data-provide" => 'datepicker', "data-date-autoclose" => "true" , "data-date-format" => "dd/mm/yyyy", class: 'form-control' %>
            </div>

gemfile

gem 'bootstrap-datepicker-rails', '~> 1.6.4'

application.js

//= require bootstrap-datepicker
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.pt-BR.js

application.css.sass

@import "bootstrap-datepicker"

Can help me?

[Nerian]

@Josano Please open a different Github Issue if you are going to ask a question unrelated to this one.

You may be missing the language option in the initializer. Do you have something like this:

    $("[data-provide=datepicker]").datepicker(language: 'br');

[Nerian]

So, was this resolved?

Latest version of Datepicker is 1.7.1.1.

Feel free to reopen if you are still in trouble.