Place and behaviour of Bootstrap Datepicker in Ruby-on-Rails

Question

I'm using the Bootstrap Datepicker in my ruby-on-rails-project, but it needs some changes (for better understanding of my problem, just go to my heroku-site: https://evening-basin-18662.herokuapp.com/static_pages/stackoverflow and hit the text-field):

The Bootstrap Datepicker only shows up, after I hit the text-field.

But I want, that there is no text-field and that the datepicker is already there, when the page is loaded up.

The Bootstrap Datepicker shows up at a weird location (on my site, it shows up left down, under the footer).

But I want, that it shows up in the middle of the page, above the footer, (where the button is).

This is my implementation:

<h2>Neuer Event</h2><br>
<input type="text" class='datepicker' >

<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker({
      multidate: true,
      format: 'yyyy-mm-dd'
    });
  });
</script>
<br>
<button class="btn3">Add dates to the hidden field</button>

Any ideas, what is causing this behaviour? Thanks in advance!

Edit:

I found out, how I can add the datepicker to a specific div with the container option:

<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker({
      multidate: true,
      format: 'yyyy-mm-dd',
      todayHighlight: true,
      container: ".jesus",
    });
  });
</script>

In this example, the datepicker will appear in the div with the class "jesus".

Now I only need to find out, that the datepicker appears, without to click on the textfield.

I would guess that you haven't included the datepicker's CSS file. — Roamer-1888, Feb 28 '16 at 01:41
I googled for bootstrap datepicker css and I couldn't find anything useful. Could you be more specific? — Metaphysiker, Feb 28 '16 at 07:16
https://eonasdan.github.io/bootstrap-datetimepicker/Installing/ — Roamer-1888, Feb 28 '16 at 08:02
I added the two gems to my gemfile: gem 'bootstrap3-datetimepicker-rails' gem 'momentjs-rails', but nothing changed. Any more ideas? — Metaphysiker, Feb 28 '16 at 08:11
In your browser, "view source" and check that the CSS is included on the page. If so, then check it's actually served. — Roamer-1888, Feb 28 '16 at 08:15
Possibly some hints [here](http://stackoverflow.com/questions/8422475/css-is-not-loading-in-app), which is similar (if my hunch is correct). — Roamer-1888, Feb 28 '16 at 18:07
BTW, I stayed in the Youth Hostel at Schaffhausen once, back in about 1984. — Roamer-1888, Feb 28 '16 at 18:12
I wasn't even born back then :) Well, as far as I see, my page does load the datepicker and the css (I can manipulate it), but it shows up at the wrong place. Should I give it a fixed position? — Metaphysiker, Feb 28 '16 at 19:03
With most datePickers, positioning adjacent to the input field is the inherent natural behaviour. I don't know the Bootstrap DatePicker in particular. How do other examples of it behave? — Roamer-1888, Feb 28 '16 at 19:19
All [these examples](http://vitalets.github.io/bootstrap-datepicker/) behave OK. Something must be different in your code, maybe due to Ruby on Rails though I doubt it. It's got to be something simple. Maybe the CSS and javascript are incompatible versions? — Roamer-1888, Feb 28 '16 at 19:23

score 1 · Accepted Answer · edited May 23 '17 at 12:15

I found out, how I can add the datepicker to a specific div with the container option:

<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker({
      multidate: true,
      format: 'yyyy-mm-dd',
      todayHighlight: true,
      container: ".jesus",
    });
  });
</script>

In this example, the datepicker will appear in the div with the class "jesus".

Now I only need to find out, that the datepicker appears, without to click on the textfield.

I finally found some other posts adressing this issue:

Require Bootstrap date picker always in open mode

$(document).ready(function () {
    $input = $("#select_date");
    $input.datepicker({
        format: 'dd MM yyyy'
    });
    $input.data('datepicker').hide = function () {};
    $input.datepicker('show');
});

Always display bootstrap-datepicker, not just on focus

and the following JavaScript:

$("#my-datepicker").datepicker().on('changeDate', function (e) {
    $("#my-input").text(e.format());
});

Place and behaviour of Bootstrap Datepicker in Ruby-on-Rails

1 Answers1