Rails4 + Bootstrap，日期选择器未显示

Posted 2023-05-09

【中文标题】Rails4 + Bootstrap，日期选择器未显示

【英文标题】：Rails4 + Bootstrap, date picker not showing

【发布时间】：2015-08-05 17:38:20

【问题描述】：

我已经使用这个在我的表单上设置了一个日期选择器：

<div class="input-group date" id="dp1">
      <%= f.text_field :birthdate, class: "form-control"%>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

我正在使用 js 触发

$('#dp1').datepicker()

我的css和js包括如下：

css

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-datepicker";

js

//= require jquery
//= require turbolinks
//= require moment
//= require bootstrap-sprockets
//= require get-shit-done
//= require bootstrap-datepicker

当我点击 时，什么都没有出现，但如果我检查元素，我可以看到下拉菜单存在，从 display:none 切换到 display:block 并位于正确的位置。

但是什么都没有，所以我认为下拉菜单就在那里，但在其他所有内容之后，更改 z-index 并没有改变任何东西。

任何想法，为什么要这样做以及如何解决？

谢谢，

【问题讨论】：

您是否尝试在站点控制台中手动输入$('#dp1').datepicker()？顺便说一句，那里有什么（错误）吗？

你为什么选择包含输入的 div 应该是 datepicker 而不是输入本身？

因为我使用了div作为输入组。

如果我在控制台上执行它，它会打印一个 html 标签并且没有错误

【参考方案1】：

正如bootstrap-datepicker library docs 所说：

$('.datepicker').datepicker(
    format: 'mm/dd/yyyy',
    startDate: '-3d'
)

大多数选项可以作为目标元素的数据属性提供：

<input class="datepicker" data-date-format="mm/dd/yyyy">

您必须选择输入并将datepicker() 应用到它。

因此，<%= text_field_tag(:q) %> 将呈现为<input id="q" name="q" type="text" />（查看rails guides on form helpers）

因此，这可能会对您有所帮助：

$('#dp1 #birthdate').datepicker()

【讨论】：

我尝试过指定 id 和 div，如前所述，它会生成一个“display:none”下拉列表，当我关注输入时会发生变化，但屏幕上看不到任何内容