Bootstrap Datepicker 在 Ruby-on-Rails 中的位置和行为答案

【问题标题】：Place and behaviour of Bootstrap Datepicker in Ruby-on-RailsBootstrap Datepicker 在 Ruby-on-Rails 中的位置和行为
【发布时间】：2016-06-11 04:50:17
【问题描述】：

我在我的 ruby-on-rails-project 中使用 Bootstrap Datepicker，但它需要一些更改（为了更好地理解我的问题，只需访问我的 heroku 站点：https://evening-basin-18662.herokuapp.com/static_pages/stackoverflow 并点击文本字段):

Bootstrap Datepicker 仅在我点击文本字段后显示。

但我希望，当页面加载时，没有文本字段并且日期选择器已经存在。

Bootstrap Datepicker 出现在一个奇怪的位置（在我的网站上，它显示在页脚下方的左下方）。

但我希望它显示在页面中间，页脚上方（按钮所在的位置）。

这是我的实现：

<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>

任何想法，是什么导致了这种行为？提前致谢！

编辑：

我发现了如何使用容器选项将日期选择器添加到特定的 div：

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

在本例中，日期选择器将出现在类“jesus”的 div 中。

现在我只需要找出日期选择器出现了，而无需点击文本字段。

【问题讨论】：

我猜你没有包含日期选择器的 CSS 文件。
我在 Google 上搜索了 bootstrap datepicker css，但找不到任何有用的东西。你能说得更具体点吗？
eonasdan.github.io/bootstrap-datetimepicker/Installing
我将两个 gem 添加到我的 gemfile 中：gem 'bootstrap3-datetimepicker-rails' gem 'momentjs-rails'，但没有任何改变。还有什么想法吗？
在您的浏览器中，“查看源代码”并检查页面中是否包含 CSS。如果是这样，请检查它是否实际送达。

标签： javascript jquery ruby-on-rails twitter-bootstrap datepicker

【解决方案1】：

我发现了如何使用容器选项将日期选择器添加到特定的 div：

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

在本例中，日期选择器将出现在类“jesus”的 div 中。

现在我只需要找出日期选择器出现了，而不需要点击文本字段。

我终于找到了一些解决这个问题的其他帖子：

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

以及以下 JavaScript：

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

【讨论】：